无法通过单击使我的 jquery 动画回来

Posted 2023-05-08

【中文标题】无法通过单击使我的 jquery 动画回来

【英文标题】：Cant make my jquery animate back with click

【发布时间】：2012-10-15 16:56:29

【问题描述】：

抱歉，如果已经回答，请发布此问题。但我已经搜索并无法理解该怎么做。

我有一个带有加号图像的 div 和一个带有一些信息的 div。 当我单击加号时，两个 div 都动画了，但是当我再次单击加号时，没有任何反应。

我希望它像这样工作 - 单击加号两个 div 动画，单击加号或离开 bigdiv 动画它。

这是我目前得到的：

jQuery(document).ready(function(e)
    $('.plussign').click(function(event) 
        $('#bigdiv').animate(height : '400px', 200);
        $('.plussign').animate(bottom : '400px', 200);
    ).click(function(event) 
        $('#bigdiv').animate(height : '80px', 200);
        $('.plussign').animate(bottom : '80px', 200);
    );;
);

【问题讨论】：

使用.toggle(function A, function B)，如果你想在一个按钮上做两件事，交替点击。 A 将在第一次和奇数点击时运行，B 将在第二次和偶数点击时运行...像您一样注册 click() 两次将同时触发这两个函数。

umm like this?: jQuery(document).ready(function(e) $('.plussign').toggle(function a(event) $('#bigdiv').animate (height : '400px', 200); $('.plussign').animate(bottom : '400px', 200); ).toggle(function b(event) $('#bigdiv' ).animate(height : '80px', 200); $('.plussign').animate(bottom : '80px', 200); );; );

【参考方案1】：

jQuery(document).ready(function(e)
    $('.plussign').toggle(function(event) 
        $('#bigdiv').animate(height : '400px', 200);
        $('.plussign').animate(bottom : '400px', 200);
    , function(event) 
        $('#bigdiv').animate(height : '80px', 200);
        $('.plussign').animate(bottom : '80px', 200);
    );
);

【讨论】：

这很有帮助！我得到了它与这个脚本一起工作！有没有办法修改它，以便如果我也点击 bigdiv 它动画回来，如果我鼠标离开 bigdiv 它动画回来也添加？以防人们不懂点击

在这种情况下，您应该将状态存储在某个变量中，并根据它在适当的处理程序中显示或隐藏元素。

【参考方案2】：

您应该使用切换。 试试下面的脚本

jQuery(document).ready(function(e)
    $('.plussign').toggle(
        function() 
            $('#bigdiv').animate(height : '400px', 200);
            $('.plussign').animate(bottom : '400px', 200);
        , function() 
            $('#bigdiv').animate(height : '80px', 200);
            $('.plussign').animate(bottom : '80px', 200);
        
    );
);

【讨论】：

感谢您的快速回复！但是我最终使用了 pckills 方法，它似乎对我和我想要实现的目标最有效

【参考方案3】：

试试这个：

//  BTW, if you're using newer jQuery and no other library that namespaces the $ symbol, 
//  you can replace that long document.ready line with the following:
//  $(function() 
jQuery(document).ready(function(e)
    //  call just one click function
    $('.plussign').click(function(e) 
        //  using toggle function will allow you to operate between the two clicks
        $(this).toggle(function(e)     //  click odd
            //  If both elements are recieving the same action, then call them in the same line, 
            //  simply seperate with a comma
            $('#bigdiv, .plussign').stop().animate(height : '400px', 200);
            //  the .stop() function will stop any previous animation and continue with the new, 
            //  this is usefull for FAST CLICKING
        ,
        function(e)    //  click even
            $('#bigdiv, .plussign').stop().animate(height : '80px', 200);
        );
    );
)

但是

我建议使用基类和切换类并使用 jQuery 的 .toggleClass 功能，因为它的编码少得多并且更容易控制，因为您可以简单地调整 css。 例如：

CSS

.open  
    height: 400px;

.closed  
    height: 80px;

脚本

$(function() 
    //  if you dont add the closed class to the html element itself on the HTML, 
    //  you can add it here before setting your click event
    $('#bigdiv, .plussign').addClass("closed");
    //  then set your click event with the toggleClass function
    $('.plussign').click(function(e) 
        $('#bigdiv, .plussign').toggleClass("open closed");
        // if you add jQueryUI to the mix you can control the speed in time as follows
        // $('#bigdiv, .plussign').toggleClass("open closed", 10000);
    );
)

【讨论】：

在这个上发生了一个奇怪的错误 =/ 我使用了 pckill 示例，它对我来说效果很好。感谢您如此快速而有帮助的回复！