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仍然更好）。

Answer 2

您可以尝试将resize添加到回调函数中，可能是在调用Resize时动画尚未完成，因此您无法获得所需的效果。

$("#myDiv").fadeToggle("fast", function () {
   Resize();
});

Answer 3

也许是因为你必须等到fadeToggle功能完成，试试这个：

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

jQuery：如何使用fadeToggle（）？

3 个答案: