Jquery – 动画高度切换

前端之家收集整理的这篇文章主要介绍了Jquery – 动画高度切换前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在屏幕顶部有一个10px的条,当点击,我想让它的动画到40px的高度,然后如果再次单击,动画回到10px。我试图更改div的id,但它不工作。我怎么能得到这个工作,还是有更好的方法来做呢?

body html:

< div id =“topbar-show”>< / div>

css:

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

javascript:

  1. $(document).ready(function(){
  2. $("#topbar-show").click(function(){
  3. $(this).animate({height:40},200).attr('id','topbar-hide');
  4. });
  5. $("#topbar-hide").click(function(){
  6. $(this).animate({height:10},'topbar-show');
  7. });
  8. });

解决方法

试试这个:
  1. $(document).ready(function(){
  2. $("#topbar-show").toggle(function(){
  3. $(this).animate({height:40},200);
  4. },function(){
  5. $(this).animate({height:10},200);
  6. });
  7. });

猜你在找的jQuery相关文章