0

I'm trying to select several elements at once and fade them in on window load. The obvious

$('.home').delay(200).fadeIn(400);

didn't work, and neither did

$('.home').each(function(){
    $(this).delay(200).fadeIn(400); 
});​

What's the best way to do this?

http://jsfiddle.net/FaqBX/4/

2
  • In what way "didn't it work"? Oct 4, 2012 at 20:33
  • It's not a great idea to use DOM ready methods both from the jsFiddle sidebar as well as in your code. Choose one or the other. You have a conflict between window.load and jsFiddle's onload option. Your handler is assigned too late,. Oct 4, 2012 at 20:44

10 Answers 10

4

You need to hide them before they can be faded in.

3

You need $(window).ready instead of $(window).load instead of document.load. And they need to be hidden first: http://jsfiddle.net/f3XhW/

3
  • window doesn't have a .ready event, but it does have a load event. If you do $(window).ready, it'll work as if you did $(document).ready Oct 4, 2012 at 20:40
  • 1
    @aquinas I think he can use window load just fine, it wasn't working probably due to jsfiddle's setting, if you look at the left panel it already says onLoad. Probably using it twice caused problems.
    – user967451
    Oct 4, 2012 at 20:41
  • @JakeRow123 is right. His $(window).load didn't work because the handler was assigned after the window had already loaded. Oct 4, 2012 at 20:45
0

Try this:

setTimeout(function () {
    $('.home').fadeIn(400);
}, 200);
0

A dirty solution is to first hide the elements, and then use the fadeIn:

$(window).load(function() {
    $('.home').attr('style', 'display: none;');//to hide them
    // First attempt
    $('.home').delay(200).fadeIn(400);
    // Second attempt
    $('.home').each(function(){
        $(this).delay(200).fadeIn(400); 
    });
});
0

Try this, remember to have display:none on your .home

 $(window).ready(function() {
     $('.home').delay(200).fadeIn(400);
 });​
0

On jsFiddle you don't need window.load since it's the default.

$('.home').fadeTo(0, 0).delay(1000).fadeTo(400, 1);

Demo: http://jsfiddle.net/elclanrs/FaqBX/9/

0

Try this fiddle:

http://jsfiddle.net/FaqBX/7/

You need to hide the elements first (as user1689607), then I changed your fiddle to no wrap (head), since it was already window.load.

0

Hide them before fading in and use document ready instead of window.load.

$(function() {
    // First attempt
    $('.home').delay(200).fadeIn(400);
});​

http://jsfiddle.net/c7LzQ/

0

http://jsfiddle.net/FaqBX/13/

Hide first in CSS:

.home { display: none; } 

If you must use a delay:

window.setTimeout(function() {
    $('.home').fadeIn(400);
}, 200);

Otherwise:

 $('.home').fadeIn(400);
0

Hide it with CSS before showing it. You can't fade it in if it's already visible.

HTML:

<div class="home">
    <h1>Home</h1>
</div>
<div class="home">
    <p>This is the home.</p>
</div>

Javascript:

$(function() {
    $('.home').fadeIn(400);
});​

CSS: .home {display:none;}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.