CODEWITHSUNDEEP
jqueryhtml
Jitender
Jitender

Reputation: 7969

fadeout and fadeIn callback function in jquery

i have three div with value first, second and third i want to fadeout them first and them fadein with delay function now i want that when my last div fadein then my all three div fade out. but my code in not working well

<script type="text/javascript">

$(function(){

    $('.fileianN').fadeOut().delay(1000).fadeIn(1000);
        $('.fileianLY').fadeOut().delay(2000).fadeIn(1000);
            $('.fiuleHg').fadeOut().delay(3000).fadeIn(1000);

    })


</script>





<div class="duanNt">
<div class="fileianN">first</div>
<div class="fileianLY">second</div>
<div class="fiuleHg">third</div>


</div>

Upvotes: 1

Views: 652

Answers (7)

Roko C. Buljan
Roko C. Buljan

Reputation: 206459

jsBin demo

$.when(
  
    $('.duanNt').children().each(function(idx,el) {
        $(el).delay(idx*600).fadeTo(700,1);
    })
  
).done(function() {
    $('.duanNt').fadeTo(300,0);
});

http://api.jquery.com/jQuery.when/
http://api.jquery.com/deferred.done/

P.S if you don't want to hide the .duanNt it self but only it's children than use: $('.duanNt > div').fadeTo(300,0);

Upvotes: 3

The Alpha
The Alpha

Reputation: 146229

function fadeElements()
{
    var divs=$('.duanNt')​.​children();
    var i = 0;
    next();
    function next() {
        divs.eq(i++).fadeIn('1000');
        setTimeout(next, 500);
        if(i===divs.length) divs.delay(1000).fadeOut();
    };

}

fadeElements();

DEMO

Upvotes: 0

Starx
Starx

Reputation: 79031

There is already a callback function. Which You can use like

$("element").fadeOut(1000, function() {
   //..callback
});

Your usage might be similar to this

$('.fileianN').fadeOut().delay(1000).fadeIn(1000, function() {   
     $('.fileianLY').fadeOut().delay(2000).fadeIn(1000, function() {
            $('.fiuleHg').fadeOut().delay(3000).fadeIn(1000);
     });
});

Upvotes: 1

Sujith Kumar KS
Sujith Kumar KS

Reputation: 1043

$.fn.delay = function(duration) {
    $(this).animate({ dummy: 1 }, duration);
    return this;
};


$(function(){

    $('.fileianN').fadeOut().delay(1000).fadeIn(1000);
        $('.fileianLY').fadeOut().delay(2000).fadeIn(1000);
            $('.fiuleHg').fadeOut().delay(3000).fadeIn(1000);
                $('.duanNt').delay(5000).fadeOut();

    })

Upvotes: 1

Rakesh Juyal
Rakesh Juyal

Reputation: 36779

You can also use promise method to ensure that the animation is completed. 

$('.fileianN').fadeOut().delay(1000).fadeIn(1000);
$('.fileianN').promise().done ( function () { $('.fileianLY').fadeOut().delay(2000).fadeIn(1000) ; } );
$('.fileianLY').promise().done ( function () { $('.fiuleHg').fadeOut().delay(3000).fadeIn(1000); } );

Now as you said, you want all divs to fade out when last one fades in . So, 

$('.fiuleHg').promise().done ( function () { $ ('.fileianN, .fileianLY, .fiuleHg' ).fadOut(); } );

You can also fadeOut the main div duanNt instead of all three just like I did. P.S. .promise() method came in jQuery 1.6

Upvotes: 1

H&#252;seyin BABAL
H&#252;seyin BABAL

Reputation: 15550

Basivally you can use following code;

<script type="text/javascript">

$(function(){

    $('.fileianN').fadeOut().delay(1000).fadeIn(1000);
        $('.fileianLY').fadeOut().delay(2000).fadeIn(1000);
            $('.fiuleHg').fadeOut().delay(3000).fadeIn(1000);
                $('.duanNt').delay(5000).fadeOut();

    })


</script>





<div class="duanNt">
<div class="fileianN">first</div>
<div class="fileianLY">second</div>
<div class="fiuleHg">third</div>


</div>

Upvotes: 1

WolvDev
WolvDev

Reputation: 3226

You can use the oncomplete callback function.

Just an example:

<script type="text/javascript"> 
$(function(){ 
    $('.fileianN').fadeOut().delay(1000).fadeIn(1000, function() {
        $('.fileianLY').fadeOut().delay(1000).fadeIn(1000, function() {
            $('.fiuleHg').fadeOut().delay(1000).fadeIn(1000); 
        }); 
    }); 
}) 
</script>

Upvotes: 0

Related Questions