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

Question

我有以下 jquery 文本飞入动画。在我进一步解释之前，这是我的代码:

<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

我认为你自己把事情搞得太复杂了。

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

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

这是我的解决方案:

var text = [
    ['Text1', 'Text2', 'Text3'],
    ['Text4', 'Text5', 'Text6']
    ];

var n = 0,
    page = 0;
var $f = $('.flying-text');

function changeText() {
    $f.eq(n).text(text[page][n]).css({
        opacity: 0,
        marginLeft: '-50px'
    }).animate({
        opacity: 1,
        marginLeft: "0px"
    }, 1200, function() {
        if (++n === 3) {
            page = 1 - page;
            n = 0;
            setTimeout(function() {
                $f.empty();
                changeText();
            }, 6000);
        } else {
            setTimeout(changeText, 2000);
        }
    });
};

changeText();​

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

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