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/ 的工作演示

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

Answer 2

这里有一个类似的问题：

delay JQuery effects

在第二个答案的 cmets 中，它指出延迟不适用于停止。

希望这个页面对你有用。

编辑 好的，我找到了解决方案。试试这个，让我知道它是否合适。

用这个替换你的延迟线：

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

Answer 3

对您的动画进行排队，并使用.delay() on，这是一个常见的队列对象 (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();

​