jQuery animate effect after animate effect, after animate effect

Question

$("#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 ){){{)){?

score 1 · Answer 1 · answered Jun 26 '13 at 09:35

1

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

answered Jun 26 '13 at 09:35

Derek Henderson

9,388
4
42
71

Thanks Derek, indeed my solution/fault was in the css. Thanks for the feedback!!! – Stan Kosmoseistis Jun 26 '13 at 09:44

score 0 · Answer 2 · answered Jun 26 '13 at 09:41

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

jQuery animate effect after animate effect, after animate effect

2 Answers2