Jquery文本动画延迟功能不起作用

Question

我有以下jquery文本fly-in动画.在我进一步解释之前,这是我的代码:

<script type="text/javascript">

$(document).ready(function(){

    $('.flying1 .flying-text').css({opacity:0});
    $('.flying1 .active-text').animate({opacity:1, marginLeft: "0px"}, 1200); //animate first text
    var int = setInterval(changeText, 3500);    // call changeText function every 5 seconds

function changeText(){  
    var $activeText = $(".flying1 .active-text");     //get current text    
    var $nextText = $activeText.next();  //get next text

    if ($activeText.is('.end')) {
        $activeText.stop().delay(5000);
        $('.flying1').html('<div class="flying-text active-text">Text4<div>
                                <div class="flying-text">Text5</div>
                                <div class="flying-text end2">Text6</div>');
        $('.flying1 .flying-text').css({opacity:0});
        $('.flying1 .active-text').animate({opacity:1, marginLeft: "0px"}, 1200); //animate first text
    };

    if ($activeText.is('.end2')) {
        $activeText.stop().delay(5000);
        $('.flying1').html('<div class="flying-text active-text">Text1<div>
                                <div class="flying-text">Text2</div>
                                <div class="flying-text end">Text3</div>');
        $('.flying1 .flying-text').css({opacity:0});
        $('.flying1 .active-text').animate({opacity:1, marginLeft: "0px"}, 1200); //animate first text
    };

    $nextText.css({opacity: 0}).addClass('active-text').animate({opacity:1, marginLeft: "0px"}, 1200, function(){

        $activeText.removeClass('active-text');                                           
    });
}
});
</script>

HTML

<div class="flying-text active-text">Text1<div>
<div class="flying-text">Text2</div>
<div class="flying-text end">Text3</div>

现在你可以看到,Text1-3首先是动画/苍蝇,然后当到达Text3时,它们被动画中的Text4-6取代,当再次到达Text6时,它再次循环回到Text1-3 ......现在基本上我想做的是当动画到达文本的末尾时暂停/延迟动画,即Text3(class ="flying-text end")和Text6(class ="flying-text end2".所以我希望Text3和Text6的动画效果比所有其他动画更长.我该怎么做？我使用的代码:

$activeText.stop().delay(5000);

不起作用......

谢谢

Answer 1

我认为你把事情变得过于复杂了。

\n\n

您只需要使用正常setTimeout来触发下一个动画，但在动画“完成”函数中执行此操作，以确保您不会将动画计时器与正常计时器混合。

\n\n

您还应该setInterval出于同样的原因避免 - 它会与任何动画计时器不同步，特别是当 jQuery 作者恢复使用requestAnimationFrame.

\n\n

这是我的解决方案：

\n\n

var text = [\n    [\'Text1\', \'Text2\', \'Text3\'],\n    [\'Text4\', \'Text5\', \'Text6\']\n    ];\n\nvar n = 0,\n    page = 0;\nvar $f = $(\'.flying-text\');\n\nfunction changeText() {\n    $f.eq(n).text(text[page][n]).css({\n        opacity: 0,\n        marginLeft: \'-50px\'\n    }).animate({\n        opacity: 1,\n        marginLeft: "0px"\n    }, 1200, function() {\n        if (++n === 3) {\n            page = 1 - page;\n            n = 0;\n            setTimeout(function() {\n                $f.empty();\n                changeText();\n            }, 6000);\n        } else {\n            setTimeout(changeText, 2000);\n        }\n    });\n};\n\nchangeText();\xe2\x80\x8b\n

\n\n

工作演示位于http://jsfiddle.net/alnitak/GE2gN/

\n\n

请注意，这将文本内容与动画逻辑完全分开。

\n