Fade in divs one after another

Question

Hey there guys, Im good with HTML and CSS but have only jsut started to scratch the surface of jQuery. I\'m looking to make 3 divs fade in on page load one after another. So

Answer 1

You can .delay() each so the one before fades in at the right time, for example:

$("#1, #2, #3").hide().each(function(i) {
  $(this).delay(i*1500).fadeIn(1500);
});

This fades them in...in the same order they occur in the page which is usually what you're after, the first is delayed 0 so it's instant, the second is delayed 1500ms (so when the first finishes, etc). In the .each() callback i is the index, starting with 0 so you can use that to quickly calculate the right delay here.

Another advantage here is this approach is much easier to maintain, give them a class for example then you can just do:

$(".fadeMe").hide().each(function(i) {
  $(this).delay(i*1500).fadeIn(1500);
});

Then you require zero maintenance on the JavaScript side to add additional

elements to fade.

0 讨论(0)

查看其它5个回答

发布评论:

提交评论

---

•  加载中...