1

小提琴

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

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

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

4

2 回答 2

2

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

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

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

于 2012-05-04T22:18:48.073 回答
0

淡入淡出的效果，是因为之前的动画一直没有停过。我只是在您的每个动画前面添加了停止，以确保它们已经停止，然后再处理自己的动画。

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);
    });
});
​
于 2012-05-04T22:21:00.693 回答