jquery - 如何使用 jquery 设置 来切换它自己的大小

Question

我正在尝试让一个元素使用 jquery 切换它自己的大小...但是它的行为很奇怪，当我第一次单击它时它会展开(非常棒)但是当我再次单击它时我不想这样做回到原来的大小，但是它又回到原来的大小，然后再次扩大……第三次点击它做同样的事情……第四次它收缩，扩大，收缩，然后再次扩大……依此类推!

有什么办法可以避免这种情况，我猜这是因为它将对大框的点击解释为对大框的点击和对小框的点击？

这是我的代码:)

$(document).ready(function(    
$("#box").click(function(){
 $("#box").toggle(function(){
        $("#box").animate({width:960},"fast","swing");
        $("#box").animate({height:500},"fast","swing");},
    function(){
        $("#box").animate({height:20},"fast","swing");
        $("#box").animate({width:20},"fast","swing");
    });
});

});

Answer 1

toggle 是一个点击处理程序。您无需将其包装在 click 中:它已为您完成。事实上，每次单击该元素时，您都会重新绑定(bind) toggle 代码，因此数量会增加。

$(document).ready(function (
$("#box").toggle(function () {
    $(this).animate({width: 960}, "fast", "swing");
    $(this).animate({height: 500}, "fast", "swing");
}, function () {
    $(this).animate({height: 20}, "fast", "swing");
    $(this).animate({width: 20}, "fast", "swing");
});
});

请注意，我已将重复的 #box 调用更改为 this，这样速度要快得多。我也可以将两组两行更改为两个单独的 animate 调用 (.animate({width: 960, height: 500})) 但行为上的差异可能需要...