Jquery切换动画点击

Posted 2023-05-08

【中文标题】Jquery切换动画点击

【英文标题】：Jquery toggle animation On click

【发布时间】：2013-05-26 09:44:49

【问题描述】：

我正在尝试在单击时展开 div，然后在另一次单击时再次缩小它。 调用此函数时，什么也没有发生。

jQuery 代码：

$(".panel").toggle(function()

    $(this).click(function()
    
        $(this).animate(width:'300px',height:'300px', 200);
    );
,
function()

    $(this).click(function()
    
        $(this).animate(width:'152px',height:'152px', 200);
    );
);

【问题讨论】：

Where has fn.toggle( handler(eventObject), handler(eventObject)...) gone?的可能重复

什么版本的 JQuery？另外，制作一个包含更多代码的 jsbin

如果可以的话，能否提供html代码？

一个解决方案是删除$(this).click(function()，但最好阅读关于toggle deprecation的信息

@j08691 这真的不是重复的。这是想要达到目的的手段，但没有指定他们需要使用 .toggle

【参考方案1】：

toggle() 只隐藏和显示div，不接受两个函数作为参数。 http://api.jquery.com/toggle/

这是我的解决方案，虽然我不确定这是否是最好的，希望有人指出改进。

var next_move = "expand";
$(document).ready(function ()
$(".panel").click(function()

    var css = ;
    if (next_move == "expand")
        css = 
            width: '300px',
            height: '300px'
        ;
        next_move = "shrink";
     else 
        css = 
            width: '152px',
            height: '152px'
        ;     
        next_move = "expand";
    
    $(this).animate(css, 200);
);
);

http://jsfiddle.net/Vc49G/

享受吧！

【参考方案2】：

click() 在切换函数中不是必需的，试试这个：

$(".panel").toggle(
function()

    $(this).animate(width:'300px',height:'300px', 200);
,
function()

    $(this).animate(width:'152px',height:'152px', 200);

);

顺便说一句，this method was deprecated in jquery 1.8

【讨论】：

对不起，我使用的是 1.9.2，所以它对我不起作用，但还是谢谢 :)