jQuery:如何使用fadeToggle()? [英] jQuery: How to use fadeToggle()?

问题描述

我想使用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调整大小.

解决方案

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

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

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

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

另一方面，如果您使用的是最新版本的jQuery，则绝对不应该使用live.请使用 on (如果使用的是旧版本，请使用

It works perfectly, but I want to do the same thing with fadeToggle() instead of toggleClass().

The problem is, that after the second click (after the div has faded out), the window does not resize - it resizes with toggleClass but not with fadeToggle.

解决方案

You probably need to supply the Resize function as a callback to the fadeToggle method, so it runs when the animation is complete:

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

Note that if you need to pass arguments into the Resize function you'll have to use an anonymous callback:

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

On another note, if you're using the latest version of jQuery you definitely shouldn't be using live. Use on instead (and if you're using an older version, delegate is still better).

这篇关于jQuery:如何使用fadeToggle()?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！