动画CSS变化后，fadeIn？

Question

我试图动画一个方块的CSS后，它已经褪色后X秒(模拟新的，旧的)，但它甚至没有按预期的动画。我还在.promise().done(function(){ animate({ ... }) })的末端尝试了fadeIn()之后的fadeIn()，但这似乎也做不到。还有别的办法吗？我已经看过了。:O

JSFiddle

$('#button').click(function() {
    var box = $('#box');
    box.fadeIn('slow');
    var end = setInterval(function() {
        box.animate({
            backgroundColor: '#EFE9A8',
            borderColor: '#F7B64D',
            color: '#AD771F'
        }, 1200);
        clearInterval(end);
    }, 200);
});

更新：

看来我的http://jsfiddle.net/WASasquatch/2QnTj/2/其实是。

Answer 1

要在fadeIn之后运行动画(或任何代码)，可以使用回调参数：

$('#box').fadeIn('slow', function () {
    // code goes here
});

不幸的是，您正在尝试动画色彩，这是不支持在基本的jQuery。因此，要回答您的问题(如何将动画排队以在fadeIn之后运行)，请使用回调。但要回答你隐含的问题(如何动画色彩)，你需要得到“颜色”插件的jQuery或使用jQuery用户界面，它确实有动画色彩的支持。

有关animate()方法的更多信息，在这里：https://api.jquery.com/animate/

Answer 2

如果您想在另一个动画结束后对动画进行排序，您可以这样做：

box.fadeIn('slow').delay(200).animate({
                backgroundColor: '#EFE9A8',
                borderColor: '#F7B64D',
                color: '#AD771F'
            }, 1200);

您的jsFiddle不能工作，因为它没有彩色动画插件。无论如何，即使我添加了jQuery UI (它现在包括彩色动画插件)，我也无法让它与jsfiddle一起工作。我认为jQuery UI在jsFiddle中有一个问题。

编辑:用jsbin：http://jsbin.com/xadiwuxo/1/edit?html,css,js,output试试

Edit2:事实上，如果您使用正确的jQuery UI版本，jsfiddle可以工作。我认为您至少需要jQuery用户界面1.9.x。上面的jsFiddle使用jQuery 1.x (edge)，因此仅限于jQuery UI 1.8.9。

Answer 3

您可以包括jQuery UI，以便使.animate()与彩色动画一起工作。

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

更新Fiddle