第二个动画不起作用答案

【问题标题】：Second animation not working第二个动画不起作用
【发布时间】：2013-05-16 19:30:26
【问题描述】：

在 UL 列表中，我是否要为里面的第一个 LI 设置动画。第一个动画将删除蓝色背景的 CSS 类，并为其添加新的 CSS 以使其具有深色背景。它还在里面增加了一行新的代码。第二个动画会将同一个 div 向上推，并在其上淡入淡出，使其消失。然后它将被删除。

我测试过的两个动画都是通过注释掉另一个动画来分开的，并且可以正常工作。问题是我不能一起运行它们，如果我做第一个动画，那么第二个动画根本不起作用。

listTop = $('#ypPlaylist > ul li:first');

setTimeout(function () 
{
    listTop.css('background', '#2d89ef').removeClass('bg-color-blue');
    listTop.animate({ backgroundColor: '#1d1d1d' }, 300);
    listTop.prepend('<b>Running: </b>').fadeTo(300);
}, 1000)

setTimeout(function () 
{
    listTop.animate({ marginTop: '-=82px', opacity: 0 }, 800, function () 
    {
        listTop.remove();
    });
}, 3000);

【问题讨论】：

“根本不起作用” - 发生了什么？
第二个动画没有出现。它应该向上移动 LI 并将其移除，但事实并非如此。如果我不运行第一个动画，它确实有效。
你能在小提琴中创建它吗...jsfiddle.net
如果在 setTimeout 中给出不同的值怎么办？是的，你能发一个fiddle吗？
好的，所以我用jsfiddle.net/w4KYN 重新创建了它，出于某种奇怪的原因，它当时是否可以正常工作。它可能无法在我设置的整个网站上运行，因为我有一个脚本每秒更改 div 内的文本？

标签： javascript jquery animation

【解决方案1】：

您可以将所有内容连接在一起，在两者之间设置延迟并删除 setTimeouts 函数。结帐http://api.jquery.com/animate/ 和http://api.jquery.com/delay/
还有一个简短的例子$('#foo').slideUp(300).delay(800).fadeIn(400);

【讨论】：