jQuery fadeToggle一个接一个 [英] jQuery fadeToggle one after the other

问题描述

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

I have a jquery function the toggles two divs with fadeToggle.

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

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

But I need it to fade the visible one out THEN fade the hidden one in. then vise versa.

任何想法？

谢谢
C

更新：请在此处查看jsfiddle： http://jsfiddle.net/tSmUA/4/

UPDATE: please check jsfiddle here: http://jsfiddle.net/tSmUA/4/

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

Now I have an issue when toggleing back it shows both divs for a moment.

推荐答案

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

Simple fix. At the end of the Fade function use the second parameter of fadeToggle to provide a callback once the animation is complete.

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

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

Below will do the fade, and then once that fade is complete the anonymous function is invoked. To do the fading in reverse just modify the selectors appropriately.

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

更新：
提问者遇到问题让人感到沮丧相反。更新了代码以显示如何反向淡化。

UPDATE: Questioner had issues getting the fading to work in reverse. Updated code to show how to do the fading in reverse.

$(".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/

Sample can be viewed at: http://jsfiddle.net/v25zx/

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

Update 2: Added another revision to the fading code. This simplifies the jquery animations:

http://jsfiddle.net / sGpj6 /

这篇关于jQuery fadeToggle一个接一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！