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

找到一些jQuery效果的良好开始代码并学习here如何让一个jQuery效果在另一个之后启动。上面的代码工作正常：我的文本块动画，标题淡入，#building div变得更大。因此前三个效果以正确的顺序显示。但似乎是我在插入第四个效果（动画#info001）时失去了控制力。有人可以告诉我，如果代码看起来很好，或者我确实在){){{)){中迷失了方向吗？

Answer 1

我无法发现您的代码有任何问题，所以我猜测问题出在其他地方。确保#info001具有某种可以采用宽度和高度的布局（例如block而不是inline）。

Answer 2

尝试在.animate（）前添加.stop（）并查看。？

$("#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动画效果

2 个答案: