Jquery - 动画高度切换
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4965004/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery - animate height toggle
提问by We're All Scholars
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?
我在屏幕顶部有一个 10px 的栏，当点击它时，我希望它动画到 40px 的高度，然后如果再次点击，动画回到 10px。我尝试更改 div 的 id，但它不起作用。我怎样才能让它工作，或者有更好的方法来做到这一点？
body html:
正文 html：
<div id="topbar-show"></div>
<div id="topbar-show"></div>
css:
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');
});
});
回答by Ian Christian Myers
Give this a try:
试试这个：
$(document).ready(function(){
$("#topbar-show").toggle(function(){
$(this).animate({height:40},200);
},function(){
$(this).animate({height:10},200);
});
});
回答by user113716
You can use the toggle-event(docs)method to assign 2 (or more) handlers that toggle with each click.
您可以使用toggle-event(docs)方法分配 2 个（或更多）处理程序，这些处理程序在每次单击时进行切换。
Example:http://jsfiddle.net/SQHQ2/1/
示例：http : //jsfiddle.net/SQHQ2/1/
$("#topbar").toggle(function(){
$(this).animate({height:40},200);
},function(){
$(this).animate({height:10},200);
});
or you could create your own toggle behavior:
或者您可以创建自己的切换行为：
Example:http://jsfiddle.net/SQHQ2/
示例：http : //jsfiddle.net/SQHQ2/
$("#topbar").click((function() {
var i = 0;
return function(){
$(this).animate({height:(++i % 2) ? 40 : 10},200);
}
})());
回答by Nathan Anderson
You should be using a classto achieve what you want:
您应该使用 aclass来实现您想要的：
css:
css：
#topbar { width: 100%; height: 40px; background-color: #000; }
#topbar.hide { height: 10px; }
javascript:
javascript:
$(document).ready(function(){
$("#topbar").click(function(){
if($(this).hasClass('hide')) {
$(this).animate({height:40},200).removeClass('hide');
} else {
$(this).animate({height:10},200).addClass('hide');
}
});
});
回答by user2756339
Very late but I apologize. Sorry if this is "inefficient" but if you found all the above not working, do try this. Works for above 1.10 also
很晚了，但我道歉。抱歉，如果这“效率低下”，但如果您发现以上所有方法都不起作用，请尝试此操作。也适用于 1.10 以上
<script>
$(document).ready(function() {
var position='expanded';
$("#topbar").click(function() {
if (position=='expanded') {
$(this).animate({height:'200px'});
position='collapsed';
} else {
$(this).animate({height:'400px'});
position='expanded';
}
});
});
</script>
回答by Mahesh B
The below code worked for me in jQuery2.1.3
下面的代码在 jQuery2.1.3 中对我有用
$("#topbar").animate('{height:"toggle"}');
Need not calculate your div height,padding,margin and borders. It will take care.
无需计算您的 div 高度、填充、边距和边框。它会照顾。
回答by AlfaTeK
That would be a possibility:
那将是一种可能性：
$(document).ready(function(){
$("#topbar").toggle(function(){
$(this).animate({height:40},200);
},
function(){
$(this).animate({height:10},200);
});
});#topbar {
width: 100%;
height: 10px;
background-color: #000;
color: #FFF;
cursor: pointer;
}<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</head>
<body>
<div id="topbar"> example </div>
</body>
</html>回答by Aleksi Yrttiaho
I just thought to give you the reason why your solution did not work:
我只是想告诉您您的解决方案不起作用的原因：
When $(document).ready()is executed only the $('#topbar-show')selector can find a matching element from the DOM. The #topbar-showelement has not been created yet.
当$(document).ready()仅执行$('#topbar-show')选择器可以找到从DOM的匹配元件。该#topbar-show元素尚未创建。
To get past this problem, you may use live event bindings
为了解决这个问题，您可以使用实时事件绑定
$('#topbar-show').live('click',function(e){});
$('#topbar-hide').live('click',function(e){});
This is the most simple way to fix you solution. The rest of these answer go further to provide you a better solutions instead that do not modify the hopefully permanent id attribute.
这是修复您的解决方案的最简单方法。这些答案的其余部分进一步为您提供更好的解决方案，而不是修改希望永久的 id 属性。
回答by Bronco
You can also use this trick: replace
你也可以使用这个技巧：replace
$("#topbar").click(function(){
by
经过
$(document).on("click", "#topbar", function(){
This will bind an event on a not loaded yet object... ;)
这将在尚未加载的对象上绑定事件...;)
回答by Elliot
Worked for me:
为我工作：
$(".filter-mobile").click(function() {
if ($("#menuProdutos").height() > 0) {
$("#menuProdutos").animate({
height: 0
}, 200);
} else {
$("#menuProdutos").animate({
height: 500
}, 200);
}
});
