如何依次淡入淡出

Question

我想要 fadeIn 和 fadeOut 对 div 的影响以固定的间隔依次进行。我尝试使用以下代码，但它会同时 div fadeIn 和 fadeOut.

HTML

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

jQuery

function fade()
{
   $("div").each(function(){
       $(this).fadeOut(3000);
   });
   $("div").each(function(){
       $(this).fadeIn(3000);
   });
}
setInterval(fade,6000);

更新

I want First of all div one by one disappear from screen. When all div disappear then one by one show. This should happen regular interval.

JS Fiddle

Answer 1

我猜你应该在 jQuery 上使用函数 next，像这样，我刚刚在你的代码片段中写了 forking on jsfiddle:

http://jsfiddle.net/1n30hp49/17/

在上面的这段代码中，我还使用了 $el 来定义谁将成为下一个元素：

function fade( el, timer ){
el.fadeOut( timer , function() {
    $( this ).fadeIn( timer , function() {
        fade( $( this ).next(), timer ) ;
    } ) ;
} ) ;
}

var timer = 1000 ;

//run function
fade( $( "div:first-child" ), 1000 ) ;

尝试这样做，如果可行，请告诉我它是否有效！附件

Answer 2

一个可靠的方法是在递归循环中使用 jQuery 动画队列和延迟对象。这种方法的优点是您可以轻松地将动画添加到淡入淡出功能中。它也比一堆嵌套的回调更容易阅读。

// Get all the div elements
var divs = $('div');

/**
 * Fade in a specific indexed div element
 * @param {integer} i
 * @return {object} $.promise
 */
function fade(i)
{
    return divs.eq(i)
        .fadeIn(3000)
        .delay(6000)
        .fadeOut(3000)
        .promise();
}

/**
 * Recursive sequence runner
 * @param {integer} i
 */
function runSequence(i) {
    // If i is null/false set it to 0
    i = ! i ? 0 : i;

    // Run animation on item i
    var promise = fade(i);

    // Use the promise to queue up the next item
    // by calling this function again when the
    // animation is complete
    promise.then(function() {
        if (i > divs.length) {
            i = 0;
        }

        runSequence(++i);
    });
}

// Run the sequence for the first time
runSequence();

JSFiddle example

Answer 3

有多种方法可以按顺序执行延迟操作。这是一篇关于此的好文章 http://www.paulirish.com/2008/sequentially-chain-your-callbacks-in-jquery-two-ways/

根据评论和你后面定义的需求，你可以这样解决，用fadeTo代替fadeIn/fadeOut

var start = $('div:first');

function fade(lobj){
    lobj.fadeTo('slow',lobj.css('opacity')==1 ? 0 : 1,function(){
        var nobj = lobj.next();
        if(nobj.length)
            fade(nobj);
        else
            fade(start);
    });
}

fade(start);

http://jsfiddle.net/sofl/1n30hp49/15/

Answer 4

这里有一些很好的答案，但只是为了增加div的趣味性，这是另一种很好的淡入淡出方式：

请注意

Whosebug 在其片段中包含第三方脚本的方法干扰了此示例，因此我不得不在其他 div 周围添加一个容器 div。有关更纯粹的示例，请参阅 fiddle.

function fade() {
    
    var thisObj = this;
 
    thisObj.out = function(el, timer) {
     
        el.fadeOut( timer , function() {
            
            if ($( this ).prev().length > 0) {
            
                thisObj.out( $( this ).prev(), timer );
                
            } else {
                thisObj.in( $( "#container").find("div:first-child" ), timer );
            }
        } ) ;        
    }  
    thisObj.in = function(el, timer) {
     
        el.fadeIn( timer , function() {
            
            if ($( this ).next().length > 0) {
                
                thisObj.in( $( this ).next(), timer ) ;
                
            } else {
                thisObj.out( $( "#container").find("div:last-child" ), timer );
            }
            
        } );       
    }     
    
}

new fade().out( $( "#container").find("div:last-child" ), 1000 );

#container div {
    background : #00f;
    height: 50px;
    width : 50px;
    margin : 5px;
    float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

要改变淡入淡出的顺序，只需将last-child改为first-child即可。

如何依次淡入淡出

How to fadeIn and fadeOut in sequence

javascript

css

jquery

fadeout

fadein

请注意