这是一个非常简单的问题。我基本上在页面上有一个 div block ,当单击它时,它的大小会增加,当再次单击时又会恢复到原来的大小。我的问题是它似乎根本不起作用。另外,我确信有一种比这样的 if 语句更简洁的方法可以在两个动画状态之间切换,但我不确定具体如何执行此操作。
$(document).ready(function(){
var toggle = 0;
$(".login").click(function(){
if($toggle == 0){
$(this).animate({
height: '200',
}, 500, function(){
});
$toggle = 1;
}
else if($toggle == 1){
$(this).animate({
height: '100',
}, 500, function(){
});
$toggle = 0;
}
});
});
对应的html代码很简单
<div class="login">Click Me</div>
如果还需要什么,请告诉我。
最佳答案
您的代码不起作用,因为您在一个位置使用了 toggle
,而在另一位置使用了 $toggle
。
但是,这可以更简单地完成,如下所示:
$(document).ready(function(){
$(".login").toggle(function() {
$(this).animate({height: '200'});
}, function() {
$(this).animate({height: '100'});
});
});
这里的工作演示:http://jsfiddle.net/jfriend00/5Wu6m/
当给定函数列表作为参数时,.toggle(fn1, fn2)
方法将从第一个函数开始在给定的函数之间交替。这会自动为您跟踪切换状态 - 您不必这样做。
jQuery 文档是 here 。 .toggle() 有多种形式,具体取决于所使用的参数,因此在搜索 jQuery 文档时,您并不总能找到正确的形式。
关于jQuery 动画切换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9366601/