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);
}
);

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

Jquery切换动画点击

2 个答案: