Question

我已经写了我的第一个jQuery脚本，可以动画多个＆＃34; wall＆＃34;像这样的HTML图像：

<div id="home-wall">
    <div class="wall" animation-order="default">
        <div class="uk-grid grid uk-grid-preserve wk-gallery wk-gallery-wall zoom">
            <a class="" href=""><img src="gallery/zoom/image1.jpg"></a>
            <a class="" href=""><img src="gallery/zoom/image2.jpg"></a>
            <a class="" href=""><img src="gallery/zoom/image3.jpg"></a>
            <a class="" href=""><img src="gallery/zoom/image4.jpg"></a>
            <a class="" href=""><img src="gallery/zoom/image5.jpg"></a>
        </div>
    </div>
    <div class="wall" animation-order="default">
    ....
    </div>
</div>

当我使用这样的调用时（在脚本中或直接在Firebug控制台中），我仍然无法理解为什么

jQuery(".wall").first().fadeOut(400).next().fadeIn(400);

淡入淡出动画似乎不会在默认的fx队列like the docs says中排队，但会同时发生。我希望首先看到第一面墙的淡出，只有当它完全隐藏（display:none）看到下一面墙才会消失。

我不明白的是什么？我是否要创建自定义动画队列？

Answer 1

jQuery动画队列是每个元素，而不是每个文档。你正逐渐消失了与淡出的元素不同的元素，因此动画可以同时发生。

对于像这样的简单双元素情况，制作动画顺序的最简单方法是使用animation function's complete callback。回调函数将在第一个动画结束时运行，为您提供所需的效果。像这样：

$('.wall').first().fadeOut(400, function() {
    $(this).next().fadeIn();
});

默认的jQuery淡入淡出动画方法不使用默认的fx队列？

1 个答案: