CODEWITHSUNDEEP
jqueryjquery-animate
Stan Kosmoseistis
Stan Kosmoseistis

Reputation: 1

jQuery animate effect after animate effect, after animate effect

$("#page1 .textblock.hidden").fadeIn('fast').animate({
    'marginTop': textblockpan - ($("#page1 .textblock").height() / 2),
}, 1500, function () {
    $(".title").fadeIn(500, function () {
        $("#building").animate({
            width: "147px",
            height: "147px"
        }, 1000, function () {
            $("#info001").animate({
                width: "147px",
                height: "147px"
            }, 1000)
        });
    });
}).removeClass('hidden').addClass('visible');

Found and a good startcode for some jQuery effects and learned here how you should let one jQuery effect starts after a other. The code above works fine: my textblock animates in, the title is fading in and the #building div becomes bigger. So the first three effects show up in the correct order. But seems to be I lost control with inserting the fourth effect (animate #info001). Can somebody tell me if the code is looking fine or that indeed i lost my way in all the ){){{)){?

Upvotes: 0

Views: 134

Answers (2)

yeyene
yeyene

Reputation: 7380

Try to add .stop() in front of .animate() and see.?

$("#page1 .textblock.hidden").fadeIn('fast').animate({
    'marginTop': textblockpan - ($("#page1 .textblock").height() / 2),
}, 1500, function () {
    $(".title").fadeIn(500, function () {
        $("#building").stop().animate({
            width: "147px",
            height: "147px"
        }, 1000, function () {
            $("#info001").stop().animate({
                width: "147px",
                height: "147px"
            }, 1000)
        });
    });
}).removeClass('hidden').addClass('visible');

Upvotes: 0

Derek Henderson
Derek Henderson

Reputation: 9706

I can't spot anything wrong with your code, so I'm guessing the problem is elsewhere. Make sure that #info001 has some sort of layout that can take width and height (e.g., block instead of inline).

Upvotes: 1

Related Questions