javascript - 简单的 jQuery 动画不起作用

Question

谁能帮我解决这个问题，我错过了什么？

<script type="text/javascript"> 

  $('#loginButton').click(function() {
     $('#toplogin').animate({
       height: '0px'
     });
  });
</script>

onClick 甚至没有执行!

我希望 onClick 事件起作用的 div 在这里:

 <div id="loginButton"><a href="#" title="login">Login &raquo;</a></div>

我想要动画影响的 div 在这里:

div id="toplogin"> <!-- more stuff -->  </div>

Answer 1

删除 height: '0px' 后的分号，使您的 JavaScript 有效。

<script type="text/javascript">
  $('#loginButton').click(function() {
     $('#toplogin').animate({ height:'0px' });
  });
</script>

但是，除非您为 #toplogin 设置了 overflow:hidden，否则该元素仍然可见，即使它的高度为 0px。一种更简单的方法是使用 slideUp()。

<script type="text/javascript">
  $('#loginButton').click(function(){ $('#toplogin').slideUp(); });
</script>