淡入后动画CSS更改？

Question

我正在尝试在 X 秒后淡入（模拟新旧）后为框的 CSS 设置动画，但它甚至没有按预期设置动画。我也在.click() 末尾的fadeIn() 之后尝试了.promise().done(function(){ animate({ ... }) })，但这似乎也没有做到。还有其他方法吗？我已经看到它完成了。 :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

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

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

不幸的是，您正在尝试为颜色设置动画，这在基本 jQuery 中是不支持的。因此，要回答您的问题（如何将动画排队以在淡入后运行），请使用回调。但是要回答您的隐含问题（如何为颜色设置动画），您需要获取 jQuery 的“颜色”插件或使用支持动画颜色的 jQuery UI。

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

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

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

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 4

jquery 中的 aminate 不适用于 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。

“jQuery Color 从一开始就忠实地支持两个十六进制值之间的动画颜色。许多开发人员要求访问我们声明的内部函数以使这一切成为可能。版本 2 现在包括一个用于创建和修改的 API颜色，以及对 RGBA 和 HSLA 颜色和动画的支持。” ~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 上进行测试。