jQuery:如何使用 fadeToggle()？

Question

我想使用 jQuery 的 fadeToggle() 函数。

我有一个隐藏的 div，当我单击链接时，我想调用 fadeToggle() 使 div 淡入，并在再次单击后淡出。

线索是，我想在使用我自己的函数单击后调整窗口大小(效果很好)。

目前我有这个解决方案:

jQuery:
$("#myLink").live("click", function () {
   $("#myDiv").toggleClass("myDivClass");
   Resize();
});

Css:
<style type="text/css">
#myDivclass {
display:none;
}
</style>

它工作得很好，但我想用 fadeToggle() 而不是 toggleClass() 做同样的事情。

问题是，第二次单击后(div 淡出后)，窗口不会调整大小 - 它使用 toggleClass 调整大小，但不使用 fadeToggle 调整大小。

Answer 1

您可能需要提供 Resize 函数作为 fadeToggle 方法的回调，以便它在动画完成时运行:

$("#myLink").live("click", function () {
    $("#myDiv").fadeToggle(1000, Resize);
});

请注意，如果您需要将参数传递到 Resize 函数中，则必须使用匿名回调:

$("#myLink").live("click", function () {
    $("#myDiv").fadeToggle(1000, function() {
        Resize();
    });
});

另一方面，如果您使用的是最新版本的 jQuery，那么您绝对不应该使用 live。使用on相反(如果您使用的是旧版本，delegate 仍然更好)。