jQuery：如何使用 fadeToggle()？答案

【问题标题】：jQuery: How to use fadeToggle()?jQuery：如何使用 fadeToggle()？
【发布时间】：2012-05-10 20:45:36
【问题描述】：

我想使用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。

【问题讨论】：

标签： jquery fade

【解决方案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 会更好）。

【讨论】：

没问题，很高兴能帮上忙 :)

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

可能是因为你必须等到fadeToggle函数完成，试试这个：

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

【讨论】：