Jquery - 动画高度切换

Question

我在屏幕顶部有一个 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');
  });
});

Answer 1

尝试一下:

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