Question

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>

Answer 1

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