Question

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

我遇到的问题是水印（大灰色文本）有时会多次淡入淡出，并且动画以错误的顺序发生。我发现了一些关于类似问题的其他帖子，但他们都认为要动画的元素叫做＃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");
            });
        });
    });
}

我不确定为什么这些回调在淡入淡出*没有时会起作用。

Answer 1

我不确定我是否完全理解你在寻找什么。我已更新您的示例以使用jQuery.when()方法 - http://jsfiddle.net/jaredhoyt/xXbbX/8/

如果这不是预期效果，请告诉我。

作为旁注，我强烈建议在JavaScript中使用1TBS缩进样式而不是Allman样式。虽然这在大多数语言中都是一个偏好问题，但它实际上在JavaScript中具有危险的含义。

Answer 2

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

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

jquery中的连续动画

2 个答案: