jquery中的顺序动画

当我单击屏幕顶部的彩色框时，我希望淡出框和水印，然后淡入，但我不希望动画重叠

我遇到的问题是，水印（大灰色文本）有时会淡入淡出几次，而动画以错误的顺序出现。我发现了一些关于类似问题的其他帖子，但它们都假设要设置动画的元素称为#item1、#item2等，并使用循环

编辑：我最后做的是

function transition(text,title)
{
    $('.boxes').animate({opacity:0},400,"linear",function() {
        $('.watermark').animate({opacity:0},400,"linear",function(){
            $('.watermark').html(text);
            $('.watermark').animate({opacity:1},400,"linear",function(){
                $('.' + title).animate({opacity:1},400,"linear");
            });
        });
    });
}

---

我不知道为什么这些回调在fade*回调不起作用的情况下起作用。

我不确定我是否完全理解您在寻找什么。我已经更新了您的示例以使用

jQuery.when（）

方法-

如果效果不理想，请告诉我

---

作为补充说明，我强烈建议使用缩进样式而不是JavaScript中的样式。尽管在大多数语言中这是一个偏好问题，但在JavaScript中它实际上具有危险的含义。

淡入淡出的效果是因为之前的动画从未停止过。我只是在每个动画前面添加了停止，以确保它们在处理自己的动画之前已经停止

function transition(text,title)
{
    $('.boxes').stop().fadeOut(400,function()
    {
        $('.watermark').stop().fadeOut(400,function()
        {
            $('.watermark').html(text);
            $('.watermark').stop().fadeIn(400,function()
            {
                $('.'+title).stop().fadeIn(400);
            });
        });
    });
}



$(document).ready(function()
{

    $('li span').click(function()
    {
        var text = $(this).html();
        var title = $(this).attr('title');
        if(text == 'Show All')
        {
            text = "watermark";
        }

        transition(text,title);
    });
});
​

---

这正是我想要的，但我希望这些框在水印之前/之后消失。还有，我要读1TB。谢谢如果我从水印fadein中删除.stop（），元素将以正确的顺序出现，但同时仍在消失。我想我对回调函数感到困惑。它们不应该只在父函数完成后执行吗？等一下，您希望每个.box一个接一个地淡出？我希望所有带有.box的元素一次淡出，一旦它们消失，然后淡出.watermark