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 far I have this
<script type="text/javascript">
$('#1').hide().fadeIn(1500);
$('#2').hide().fadeIn(1500);
$('#3').hide().fadeIn(1500);
</script>
I heard that to use css to set the display to none is a nightmare for anyone with a non JavaScript browser so I used the hide function to initially hide the divs.
But this only fades them in all at once. Any ideas?
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 far I have this
<script type="text/javascript">
$('#1').hide().fadeIn(1500);
$('#2').hide().fadeIn(1500);
$('#3').hide().fadeIn(1500);
</script>
I heard that to use css to set the display to none is a nightmare for anyone with a non JavaScript browser so I used the hide function to initially hide the divs.
But this only fades them in all at once. Any ideas?
Share Improve this question asked Sep 22, 2010 at 11:10 Alex SadlerAlex Sadler 4332 gold badges8 silver badges22 bronze badges 2- If no Javascript in browser then no fadeIn or other such effects. So instead of worrying about javascript disabled browser while applying fadeIn effect, you can show them static content in the noscript section. – Atharva Commented Nov 25, 2012 at 9:21
- Answering your main query of sequential fading I have tried to answer it below. – Atharva Commented Nov 25, 2012 at 9:21
5 Answers
Reset to default 16You 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 <div> elements to fade.
The fade in command contains a call back function, see documentation. This means you could chain the events.
<script type="text/javascript">
$('#1, #2, #3').hide();
$('#1').fadeIn(1500, function(){ $('#2').fadeIn(1500, function(){$('#2').fadeIn(1500)})});
</script>
<script type="text/javascript">
$('#1').hide().fadeIn(1500, function(){
$('#2').hide().fadeIn(1500, function(){
$('#3').hide().fadeIn(1500);
});
});
</script>
Using the Delay function as following:
<script type="text/javascript">
$('#1').hide().fadeIn(1500);
$('#2').hide().delay(1500).fadeIn(1500);
$('#3').hide().delay(3000).fadeIn(1500);
</script>
Here is a cleaner and generic way to achieve this effect: check it out on http://jsfiddle.net/BztLx/20/
Logic trick relies on the callback functionality of the fadeIn and using .eq() as an iterator over the selected elements.
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function sequentialFadeIn(selectorText, speed, display, callBack) {
display = typeof display !== 'undefined' ? display : "block";
var els = $(selectorText), i = 0;
(function helper() {
els.eq(i++).fadeIn(speed, helper).css("display", display);
if (callback && i === els.length) callback();
})();
}
sequentialFadeIn(".toBeFaddedIn", "slow", "inline-block", function() {
console.log("I am just an optional callback");
});
});
</script>
</head>
<body><style media="screen" type="text/css">
.hello {
background-color: blue;
height:50px;
width: 50px;
display: none;
}
</style>
<div class="hello toBeFaddedIn"></div>
<div class="hello toBeFaddedIn"></div>
<div class="hello toBeFaddedIn"></div>
<div class="hello toBeFaddedIn"></div>
<div class="hello toBeFaddedIn"></div>
</body></html>