CODEWITHSUNDEEP
javascriptjquerycssfadeinfadeout
Sadikhasan
Sadikhasan

Reputation: 18600

How to fadeIn and fadeOut in sequence

I want fadeIn and fadeOut effect on div one by one sequentially with regular interval. I tried with following code but it will all div at a time fadeIn and 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);

Update

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

Upvotes: 0

Views: 2185

Answers (4)

Chris Spittles
Chris Spittles

Reputation: 15359

There's been some great answers here but just to add to the diversity, here's another way with just good-ol' Fade in's and outs:

PLEASE NOTE

Stackoverflow's method of including third party scripts in their snippets interferes with this example so I had to add a container div around the other divs. For a purer example see the 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>

To change the order of the fade in and out, just change last-child to first-child.

Upvotes: 0

sofl
sofl

Reputation: 1024

There are different ways to execute deferred actions sequentially. Here is a good article about this http://www.paulirish.com/2008/sequentially-chain-your-callbacks-in-jquery-two-ways/

According to the comments and your later defined needs, you can solve it like this and use fadeTo instead of 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/

Upvotes: 2

David Barker
David Barker

Reputation: 14620

A reliable way to do this would be to use jQuery animation queues and a deferred object in a recursive loop. The advantage of this method is the ease you can add animations into the fade function. It is also much easier to read than a bunch of nested callbacks.

// 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

Upvotes: 0

guicheffer
guicheffer

Reputation: 1

I guess you should use the function next on jQuery, like this, I just wrote forking in your snippet on jsfiddle:

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

In this code above I also used the $el to define who is going to be the next element:

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 ) ;

try to do this, if so, let me know if it works! att.

Upvotes: 0

Related Questions