javascript - 多次延迟链接 jQuery .addClass 和 .removeClass

Question

我正在使用来自 https://github.com/daneden/animate.css 的 animate.css而且它提供的动画效果比 jQuery 好得多。我想通过延迟链接动画和元素更改，以淡入和淡出元素并更改其内容。

.queue 方法适用于单个延迟，但我需要一种有效的方法来链接许多具有延迟和尽可能少的语法的 .addClass、.removeClass 和 .html 方法。

有人知道怎么做吗？

这是一个示例(不起作用，但它应该是这样):

$('div.text').delay(2000).addClass('animated fadeOutLeft').html('New content!').delay(2000).addClass('animated fadeInRight');

并且用不同的内容重复了很多次。

Answer 1

.delay()仅适用于那些使用 queue() 的方法基于执行，如 .animate() , 所以它不适用于 .addClass()或 .html() .

您可以使用手动队列来修复它

$('div.text').delay(2000).queue(function () {
    $(this).addClass('animated fadeOutLeft').html('New content!').delay(2000).queue(function () {
        $(this).addClass('animated fadeInRight')
    }).dequeue()
});

演示:Fiddle