jQuery 动画切换

Question

这是一个非常简单的问题。我基本上在页面上有一个 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>

如果还需要什么，请告诉我。

Answer 1

您的代码不起作用，因为您在一个位置使用了 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 文档时，您并不总能找到正确的形式。