jQuery fadeToggle 一个接一个

Question

我有一个 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/

Below 将执行淡入淡出，然后在淡入淡出完成后调用匿名函数。要反向进行淡入淡出，只需适当地修改选择器。

$(".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');
                            });      
    }
});

样品可以在以下位置查看：http://jsfiddle.net/v25zx/

更新 2： 对衰落代码添加了另一个修订。这简化了 jquery 动画：

http://jsfiddle.net/sGpj6/