CODEWITHSUNDEEP
jquery
John Smith
John Smith

Reputation: 85

Fade in one after the other

How to make li fade in one after the other? Here is the link where my lis are fading in while scrolling down at the same time, is s there a way to make them fade in one after the other? Here is my code:

<script type="text/javascript">
 $(document).ready( function() {

 tiles = $('.ajax_block_product').fadeTo(0,0);

 $(window).scroll(function(d,h) {
    tiles.each(function(i) {
        a = $(this).offset().top + $(this).height();
        b = $(window).scrollTop() + $(window).height() + 200;
        if (a < b) $(this).fadeTo(2500,1);
    });
 });

 function inWindow(s){
  var scrollTop = $(window).scrollTop();
  var windowHeight = $(window).height();
  var currentEls = $(s);
  var result = [];
  currentEls.each(function(){
    var el = $(this);
    var offset = el.offset();
    if(scrollTop <= offset.top && (el.height() + offset.top) < (scrollTop +   windowHeight + 200))
      result.push(this);
  });
  return $(result);
}

inWindow('.ajax_block_product').fadeTo(0,1);

});
</script>

The line which is responsible for fade in is - if (a < b) $(this).fadeTo(2500,1); And here is the link if it will be helpfull - http://layot.prestatrend.com Thanks for any reply, folks!

Upvotes: 0

Views: 357

Answers (3)

zb&#39;
zb&#39;

Reputation: 8059

That sample

showthem ($('.showus'),0);

function showthem(them,ind) {
    if (ind>=them.length) {return;}
    $(them[ind]).show(5000,function() {showthem(them,ind+1);})
    console.log(them[ind],ind);
    a=them;
}

you can play with it here: http://jsfiddle.net/4pkmt/1/

Upvotes: 0

Mala
Mala

Reputation: 14823

Ideally, set the fading of the second as a callback function to the fading of the first:

if (a < b) $(this).fadeTo(2500,1, function(){
    // fade the other element in here
});

Upvotes: 1

Jasper
Jasper

Reputation: 76003

You could set a .delay() on each one that is set to the duration of the fade animation multiplied by the index of the loop so each element will wait incrementally more before animating:

if (a < b) $(this).delay(i * 2500).fadeTo(2500,1);

Inside the if statement this might create gaps between the animations, you could setup another counter variable for this reason:

var count = 0;
tiles.each(function(i) {
    a = $(this).offset().top + $(this).height();
    b = $(window).scrollTop() + $(window).height() + 200;
    if (a < b) {
        $(this).delay(count * 2500).fadeTo(2500,1);
        count++;
    }
});

If you want to get complicated then you could create a .promise() object of each fadeTo() function call that gets resolved in the fadeTo()s callback function. You could then use $.when() to run the next animation once one has finished.

Upvotes: 3

Related Questions