Question

我现在正在使用以下内容：

$('input[value=NEW]:hidden').parent().parent().animate({
                            backgroundColor: "#FF9933",
                            duration: 500
                        }).animate({
                            duration: 500,
                            backgroundColor: "#FFFFFF"
                        });

看起来这几乎〜几乎可以工作，但它似乎没有等待全部时间。

有更好的方法吗？

Answer 1

好吧，您的代码似乎对我有用（请参阅我的评论中的评论）。

虽然我不确定你的意思“它似乎没有等待全部时间”。

你的意思是你想要在第二个动画之前延迟吗？

如果有，请尝试：http://jsfiddle.net/7kKvW/1/

$('input[value=NEW]:hidden').parent().parent().animate({
    backgroundColor: "#FF9933",
    duration: 500
})  // delay the next item in the queue by 500ms
  .delay(500).animate({
    duration: 500,
    backgroundColor: "#FFFFFF"
});

http://api.jquery.com/delay/ （需要jQuery 1.4或更高版本）

Answer 2

我发现以下方法对于可能在两个动画事件的持续时间内开始动画的项目有点平滑。另外，我没有将事件延迟链接，而是将其添加为complete函数，这样如果第一个函数停止，第二个函数仍然不会发生。

此外，持续时间不必作为对象包括在内。 Duration是animate效果的默认第二个参数。

http://api.jquery.com/stop/

http://api.jquery.com/animate/

// Stop makes sure any previous animations on this 
// elements aren't making the display 'flashing' in unexpected ways
$(jqueryLookup).stop(true, true, true).animate({
    backgroundColor:"#F93",
}, 1000, function() {
    // Begin the second animation upon completing the first
    $(this).animate({
        backgroundColor:"#FFF"
    }, 500);
});

希望能帮到你！

如何使用jQuery UI颜色动画将元素淡化为颜色然后再恢复为原始颜色？

2 个答案: