4um 4um - 1 month ago 5
jQuery Question

Why doesn't my fadeIn work?

I have already tried to figure it out by using others stack overflow questions but it won't work. How can I animate something after the first animation is ready in jquery (with or without fadeIn)?

$(document).ready(function(){
$('div.sky').animate({height: '40em', opacity: '1'},5000, function() {
$('div.grass').fadeIn({opacity: '1'},5000);
});
});


The script is in my HTML document. I dont know if that might error something and the 'div.sky' works.

.sky {
background: deepskyblue;
width: 55%;
margin: auto;
opacity: 0;
}

.grass {
background: lawngreen;
width: 55%;
margin: auto;
opacity: 0;
height: 5em;
}

Answer

Here's a working example with your code

JS :

$(document).ready(function(){
        $('div.sky').animate({height: '10em', opacity: '1'},5000);
        $('div.grass').delay(5000).fadeIn();
});

CSS updated :

.grass {
    background: lawngreen;
    width: 55%;
    margin: auto;
    display:none;
    height: 5em;
}

fadeIn() works with display property, not opacity.

Then I add a delay() of the animation duration value to show the second div after animation complete.

Docs : delay() : https://api.jquery.com/delay/

Comments