jQuery fadeToggle一个接一个

我有一个jquery函数用fadeToggle切换两个div。

$(".container .readmore").click(function() { $(".container .content-teaser").fadeToggle('slow'); $(".container .content-full").fadeToggle('slow'); }); 

但是我需要它来淡化可见的那个然后淡化隐藏的那个。然后反之亦然。

有任何想法吗？

谢谢C.

更新：请在这里查看jsfiddle： http ： //jsfiddle.net/tSmUA/4/

现在我有一个问题，当切换回来时它会显示两个div。

Answer 1

简单的修复。 在Fade函数结束时，使用fadeToggle的第二个参数在动画完成后提供回调。

http://api.jquery.com/fadeToggle/

下面将执行淡入淡出，然后一旦淡入淡出完成，就会调用匿名函数。 要进行反向淡化，只需适当修改选择器即可。

 $(".container .readmore").click(function() { $(".container .content-teaser").fadeToggle('slow', function () { $(".container .content-full").fadeToggle('slow'); }); }); 

更新：提问者有问题让反向工作逐渐消失。 更新了代码以显示如何反向淡化。

 $(".container .readmore").click(function() { var container = $(".container"); //Narrow the selector to the container var teaser = $(".content-teaser", container); var fullContent = $(".content-full", container); //Check to see if the teaser is visible if(teaser.is(':visible')) { teaser.fadeToggle('slow', function () { fullContent.fadeToggle('slow'); }); } else { fullContent.fadeToggle('slow', function () { teaser.fadeToggle('slow'); }); } }); 

样本可在以下url查看： http ： //jsfiddle.net/v25zx/

更新2：添加了淡入淡出代码的另一个修订版。 这简化了jquery动画：

http://jsfiddle.net/sGpj6/