Jquery – 动画高度切换

我在屏幕顶部有一个10px的条，当点击，我想让它的动画到40px的高度，然后如果再次单击，动画回到10px。我试图更改div的id，但它不工作。我怎么能得到这个工作，还是有更好的方法来做呢？

body 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},'topbar-show');
  });
});

解决方法

试试这个：

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