jQuery fadeToggle 一个接一个

Question

我有一个 jquery 函数，可以使用 fadeToggle 切换两个 div。

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

但我需要它淡出可见的，然后淡出隐藏的。反之亦然。

有什么想法吗？

谢谢

更新:请在此处检查 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');
                            });      
    }
});

示例可查看:http://jsfiddle.net/v25zx/

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

http://jsfiddle.net/sGpj6/