CODEWITHSUNDEEP
javascriptjquery
Michael Gruber
Michael Gruber

Reputation: 601

jQuery - Fade in objects selected by class

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/

Upvotes: 0

Views: 97

Answers (10)

bendman
bendman

Reputation: 366

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;}​

Upvotes: 0

user967451
user967451

Reputation:

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

Upvotes: 0

Robin Drexler
Robin Drexler

Reputation: 4457

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/

Upvotes: 0

Matt Burland
Matt Burland

Reputation: 45135

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.

Upvotes: 0

elclanrs
elclanrs

Reputation: 94101

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/

Upvotes: 0

LCDesign Cambridge
LCDesign Cambridge

Reputation: 144

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

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

Upvotes: 0

rbernabe
rbernabe

Reputation: 1072

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

Upvotes: 0

aquinas
aquinas

Reputation: 23796

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

Upvotes: 3

I Hate Lazy
I Hate Lazy

Reputation: 48761

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

Upvotes: 4

Darkwater
Darkwater

Reputation: 1386

Try this:

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

Upvotes: 0

Related Questions