Jquery - 动画高度切换 [英] Jquery - animate height toggle

问题描述

我在屏幕顶部有一个 10 像素的栏，当点击时，我希望它动画到 40 像素的高度，然后如果再次点击，动画回到 10 像素.我尝试更改 div 的 id，但它不起作用.我怎样才能让它起作用，或者有更好的方法吗?

I have a 10px bar along the top of the screen that, when clicked, I want it to animate to a height of 40px and then if clicked again, animate back down to 10px. I tried changing the id of the div, but it isn't working. How could I get this to work, or is there a better way to do it?

正文 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:

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 - 动画高度切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！