淡入后动画CSS更改？

Posted 2023-05-08

【中文标题】淡入后动画CSS更改？

【英文标题】：Animate CSS changes after fadeIn?

【发布时间】：2014-05-30 19:16:57

【问题描述】：

我正在尝试在 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实际上。

【问题讨论】：

这可能对你有帮助，看看***.com/questions/190560/…

@Rjonacci 哈哈！我刚刚找到了相同的文章！发布修订！

【参考方案1】：

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

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

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

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

【讨论】：

哦，对了，可以回调了。傻我。几分钟后我确实想通了，哈哈，请看下面的答案。

【参考方案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

【讨论】：

谢谢，我发现了这一切哈哈。看我的回答。

【参考方案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。

【讨论】：

谢谢，我通过精细搜索找到了这一切。看我的回答。

很高兴知道。请尝试使用delay 而不是setInterval。更清晰，你可以通过jQuery调用直接中断效果，以防你有一个很长的动画并想直接过渡。 setInterval 只会搞砸这种事情。

【参考方案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

【讨论】：

谢谢，几分钟后我想通了，请参阅下面的答案。哈哈。

【参考方案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 上进行测试。