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

我认为你让自己的事情变得过于复杂。

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

出于同样的原因，您还应该避免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/工作演示

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

Answer 2

There is a similar question here:

delay JQuery effects

In the comments of the second answer down it states that delay doesnt work with stop.

Hope this page is useful to you.

EDIT OK i have found a solution. Try this and let me know if its suitable.

Replace your delay lines with this:

  $(this).animate('pause').delay(5000).animate('resume');

Answer 3

将您的动画排入队列，并使用.delay()一个通用的队列对象（demo）：

var text = [
        [ 'Text1', 'Text2', 'Text3' ],
        [ 'Text4', 'Text5', 'Text6' ]
    ],
    reset = {
        opacity: 0,
        marginLeft: -50
    },
    flyout = {
        opacity: 1,
        marginLeft: 0
    },
    flyoutDuration = 1200,
    changeTextDelay = 5000,
    q = $({}), // can also be a common element, e.g. $('.flying1')
    pos = 0;

function changeText() {
    $('.flying1 .flying-text').each(function(i) {
        var div = $(this);

        // setup text
        div.css(reset).text(text[pos][i]);

        // queue
        q.queue(function(next) {
            div.animate(flyout, flyoutDuration, next);
        });
    });

    q.delay(changeTextDelay).queue(function(next) {
        pos = (pos + 1) % text.length;
        changeText();
        next();
    });
}

changeText();

​</p>