jQuery 动画切换答案

【问题标题】：jQuery Animation TogglejQuery 动画切换
【发布时间】：2012-03-11 02:47:53
【问题描述】：

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

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

【问题讨论】：

它不起作用，因为您使用0 初始化toggle，但在其余代码中使用$toggle。

标签： jquery jquery-animate toggle

【解决方案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 文档时并不总能找到正确的。

【讨论】：

谢谢，这就是我要找的。span>
是否可以将高度设置为“自动”高度，因此高度取决于内容而不是固定的？
@Amesey - 据我所知，jQuery 无法动画到“自动”高度。它需要从当前高度动画到其他已知高度。我认为您必须弄清楚如何测量自动高度才能对其进行动画处理。
好的，但是你如何用.on('mouseover',...做到这一点？
@cbmtrx - 用.on('mouseover',...)做什么？请提出一个新问题，您可以在其中描述您正在尝试做的事情的详细信息。也许您正在寻找 jQuery 的 .hover()？

【解决方案2】：

注意区别

var toggle = 0;

和

if($toggle == 0){

您定义一个名为toggle 的变量，然后将其用作$toggle。

【讨论】：

【解决方案3】：

试试

$(".login").click(function(){
    $(this).slideToggle(500);
}

【讨论】：

slideToggle 显示和隐藏元素，它不只是设置两个值之间的高度。

【解决方案4】：

我看到了两个问题。一是您的切换变量的范围。另一个是动画属性列表中单个属性之后的常见。试试这个：

$(document).ready(function(){
    $(".login").click(function(){
        if($(this).hasClass('expanded')){
            $(this)
                .removeClass('expanded')
                .stop()
                .animate({height: '100px'}, 500)
            ;   
        }
        else{
            $(this)
                .addClass('expanded')
                .stop()
                .animate({height: '200px'}, 500)
            ;                
        }
    });
});

【讨论】：

【解决方案5】：

var H=H==200?100:200;
$(".login").on('click', function(){
    $(this).animate({height: H}, 500, function() {H=H==200?100:200;});
});

FIDDLE

【讨论】：

【解决方案6】：

我想为你的切换解决方案辩护，它没有错。

在某些情况下，只有这种代码方式才能正确工作，而.toggle() 会做一些奇怪的事情。

你只需要使用if ( toggle === 0 ){而不是if($toggle == 0){...

【讨论】：