Jquery文字动画延迟函数不起作用

Question

我有一个jQuery文本飞入动画。在我进一步解释之前，这是我的代码：

```html

以下是我的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);

无法工作...

谢谢

- Dexter Schneider

---

你的引号嵌套不正确。你能在http://jsfiddle.net上创建一个例子吗？ - Marcel Korpel

Text3应该保持在屏幕上直到下一个周期开始吗？ - Alnitak

FYI，jQuery 将拥有一个新的动画引擎：http://blog.jquery.com/2012/06/22/jquery-1-8-beta-1-see-whats-coming-and-going/ - biziclop

@Alnitak，是的，没错。在淡出之前，TExt3应该比Text1和2停留更长时间，并引入Text4-6。 - Dexter Schneider

@DexterSchneider 的旧评论 - 我已经回答了这个问题并获得了赏金 ;-) - Alnitak

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/查看演示。

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

- Alnitak

---

这对我来说看起来不错，希望Dexter也同意。我花了很长时间调整超时和间隔，但就是无法进一步改进它。 - Gaz Winter

太棒了，这正是我需要的。非常感谢你的帮助和努力。问题是，我尝试在我的网页上实现它，但它不起作用。我按原样使用它，一切都被复制，但没有文本出现。我还使用了其他几个预加载脚本和一些其他的jquery函数，所以我不知道它们是否冲突。有什么建议吗？ - Dexter Schneider

@DexterSchneider 这有点棘手 - 你的页面在任何地方都是公开的吗？ - Alnitak

是的，但我已经将主要div中的代码改回了之前的状态（在上面建议的更改之前）...您可以在这里看到它...我不断地对其进行更改，但基本功能和布局保持不变：http://v4m.mobi/index.php/en/?option=com_content&view=article&catid=2&id=140 - Dexter Schneider

@DexterSchneider 嗯，我们知道我的代码在独立运行时是有效的。当您将其放入自己的页面时，它是否产生任何控制台错误？此外，请不要忘记，此版本要求飞行的div存在，但它们不需要任何内容-脚本会动态添加。 - Alnitak

是的，我理解了...那么如何检查控制台错误？但这对我来说很常见，例如在 jsfiddle 中运行的示例并不总是在我的 Joomla 页面上工作（我讨厌 Joomla，但我别无选择，我必须使用它...）。但感谢你的回答，正如你所说，它有效，我会尝试调整直到它能够工作。你的代码真的很好。 - Dexter Schneider

Answer 2

这里有一个类似的问题：

延迟JQuery效果

在第二个答案的评论中，它指出delay与stop不兼容。

希望这个页面对你有用。

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

用以下内容替换您的延迟行：

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

- Gaz Winter

---

嗨。这里有一个可行的例子。http://jsfiddle.net/pB8zp/8/ 我想做的基本上是在淡出最后的文本元素之前暂停一段时间（即文本3和文本6）。谢谢！ - Dexter Schneider

我已经让它工作了。请看上面我的编辑。还请参见http://jsfiddle.net/pB8zp/16/。 - Gaz Winter

谢谢，但从外观上看它似乎不起作用。它似乎只在第一次显示Text3时应用，然后忽略它。我将延迟更改为8000，但实际上并没有延迟那么长时间...对此有什么建议吗？感谢您的帮助，非常感激。 - Dexter Schneider

好的，我会在午餐时再仔细看一下。 - Gaz Winter

我花了一个小时的时间来尝试让它正常工作。这一定与最初的调用方式有关。 - Gaz Winter

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

​

- Jeffery To

---

这个程序是否真正提供了每个文本滑出之间的延迟？看起来并没有。 - Alnitak

@Alnitak，你的问题只是要求在“Text3”和“Text6”之后延迟。这里有一个版本，在每个滑出后都有延迟：http://jsfiddle.net/jefferyto/pB8zp/73/ - Jeffery To

实际上这不是我的问题，而是原始问题想要在每三个项目之后有额外的延迟 - 在每个1.2秒动画开始之间有3.5秒的延迟。 - Alnitak