jQuery动画切换

Question

这是一个非常直截了当的问题.我基本上在页面上有一个div块,当点击时,它的大小会增加,再次点击时会返回到原来的状态.我的问题是它似乎根本不起作用.另外,我确信在两个动画状态之间切换的方式要比这样的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 doc就在这里.根据所使用的参数,有多种形式的.toggle(),因此在搜索jQuery文档时,您并不总能找到正确的参数.