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

我认为你为自己制造了过于复杂的事情。

您只需要使用普通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

在第二个答案的评论中，它表示延迟不适用于停止。

希望此页面对您有用。

<强> 修改好的，我找到了解决方案。试试这个，让我知道它是否合适。

用以下代码替换你的延迟线：

  $(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();

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

3 个答案: