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

简单修复。在淡入淡出函数结束时，使用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/

jQuery fadeToggle一个接一个

1 个答案: