jQuery 动画切换

Posted 2023-05-08

【中文标题】jQuery 动画切换

【英文标题】：jQuery Animation Toggle

【发布时间】：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。

【参考方案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)...