jquery - Jquery切换动画点击

Question

我正在尝试在单击时展开 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);
    });
});

Answer 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/

享受！

Answer 2

click()在切换功能中不需要，试试这个：

$(".panel").toggle(
function()
{
    $(this).animate({width:'300px',height:'300px'}, 200);
},
function()
{
    $(this).animate({width:'152px',height:'152px'}, 200);
}
);

顺便说一句，这种方法在 jquery 1.8 中已被弃用