Jquery切换动画点击答案

【问题标题】：Jquery toggle animation On clickJquery切换动画点击
【发布时间】：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

标签： jquery function jquery-animate 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，所以它对我不起作用，但还是谢谢 :)