JSFiddle

Question

我尝试在X秒后淡出一个盒子的CSS（为了模拟新的和旧的）时为它制作动画，但是它甚至没有像预期的那样动画。我在.promise().done(function(){ animate({ ... }) })结尾的fadeIn()之后尝试了.click()，但似乎也没有这样做。还有另外一种方法吗？我已经看到它完成了。：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);
});

更新

实际上似乎是我的 animation doesn't work at all 。

Answer 1

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

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

你的jsFiddle无法正常工作，因为它没有彩色动画插件。无论如何，即使我添加jQuery UI（现在包括颜色动画插件），我也无法使用jsfiddle。我认为jsFiddle中的jQuery UI存在问题。

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

Edit2：事实上，如果您使用正确的jQuery UI版本，jsfiddle会起作用。我认为你至少需要jQuery UI 1.9.x.上面的jsFiddle使用jQuery 1.x（edge），因此仅限于jQuery UI 1.8.9。

Answer 2

您可以添加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>

<强> Updated Fiddle

Answer 3

要在fadeIn之后运行动画（或任何相关代码），您可以使用回调参数：

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

不幸的是，你正在尝试动画颜色，这在基本的jQuery中是不受支持的。因此，要回答您的问题（如何将动画排队以在fadeIn之后运行），请使用回调。但要回答你的暗示的问题（如何为颜色设置动画），你需要获得＆＃34;颜色＆＃34; jQuery的插件或使用jQuery UI，它支持动画颜色。

此处有关animate()方法的更多信息：https://api.jquery.com/animate/

Answer 4

aquate in jquery不适用于 BackGroundColor ..所以你必须使用另一个颜色插件......

或者非常整洁干净的方式是使用CSS3过渡属性..

为Box添加以下css -

#box
{
..
..
..

-webkit-transition:all 1s;
-moz-transition:all 1s;
-o-transition:all 1s;
transition:all 1s
}

并在jquery中设置背景颜色边框或任何你想要的

$('#button').click(function() {
    var box = $('#box');
    setTimeout(function(){
        box.css({
        backgroundColor: '#EFE9A8',
        borderColor: '#F7B64D',
        color: '#AD771F'
        });
    },1200);        
});

检查FIDDLE

Answer 5

傻傻的我，我不知道你需要一个扩展来处理一些动画属性。在GitHub上查看 jQuery Color 。

＆＃34; jQuery Color从一开始就忠实支持两个十六进制值之间的动画颜色。许多开发人员要求访问我们声明的内部函数以使其全部成为可能。版本2现在包括用于创建和修改颜色的API，以及对RGBA＆amp; HSLA颜色和动画。＆＃34; ~jQuery博客

这个插件是我的救星，并增加了我需要的所有灵活性。的 Here is the revised version of the original code 即可。

我所要做的就是添加jQuery Color扩展，一切都很好。

<script src="http://code.jquery.com/color/jquery.color.plus-names-2.1.2.js"></script>

最好在本地存储脚本，并使用压缩版本，这是为了在JSFiddle上进行测试。

fadeIn后动画CSS更改？

JSFiddle

更新

5 个答案: