CODEWITHSUNDEEP
jqueryfadeineffectsslidedownjquery-effects
starbucks
starbucks

Reputation: 3016

Is this the right way to do fade in while sliding down in JQuery?

CODE: 

$(document).ready(function() {
    $('.some_class').slideDown(1000).fadeIn(5000);
});

Using the one above, I want to slideDown a div while having it fadeIn. The one above doesn't seem to work. What am I doing wrong?

Upvotes: 1

Views: 2882

Answers (3)

Sergio
Sergio

Reputation: 28845

Do like this:

$(document).ready(function () {
    $('.some_class').stop(true).fadeIn({
        duration: 5000,
        queue: false
    }).css('display', 'none').slideDown(1000);
 });

Demo here

The problem is that both .fadeIn() and .slideDown() need the element to have display:none;and when one of them starts it removes that and uses opacity, the second effect will not run because the display is not none anymore.

So if you stop the animation and re-insert the display none before running the last effect they will run "side by side".

Just in case you want, here is a demo with image

Upvotes: 5

Andrei Zharov
Andrei Zharov

Reputation: 58

You can do something similar:

$(document).ready(function () {
    $('.some_class').animate({
        "height": "show",
        "marginTop": "show",
        "marginBottom": "show",
        "paddingTop": "show",
        "paddingBottom": "show",
        "opacity": 1
    }, 3000);
});

Here is an example: http://jsfiddle.net/sE97R/1/

Upvotes: 1

Farhan
Farhan

Reputation: 752

Make sure element with "some_class" class is loaded properly and it is initially hidden

 $(document).ready(function() {
    $('.some_class').fadeIn(1000).slideDown(1000);
});

Upvotes: -1

Related Questions