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