jquery - jQuery-动画高度切换

我在屏幕顶部有一个10像素的栏，单击该按钮时，我希望它动画到40像素的高度，然后再次单击时，动画回落到10像素。我尝试更改div的ID，但无法正常工作。我如何才能使其正常工作，或者有更好的方法呢？

正文html:
<div id="topbar-show"></div>
CSS:

#topbar-show { width: 100%; height: 10px; background-color: #000; }
#topbar-hide { width: 100%; height: 40px; background-color: #000; }

javascript:

$(document).ready(function(){
  $("#topbar-show").click(function(){
    $(this).animate({height:40},200).attr('id', 'topbar-hide');
  });
  $("#topbar-hide").click(function(){
    $(this).animate({height:10},200).attr('id', 'topbar-show');
  });
});

最佳答案

试试看:

$(document).ready(function(){
  $("#topbar-show").toggle(function(){
    $(this).animate({height:40},200);
  },function(){
    $(this).animate({height:10},200);
  });
});

关于jquery - jQuery-动画高度切换，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/4965004/