如何在 jQuery 中动画背景图像更改

How animate background-image changes in jQuery?

本文关键字：背景 图像 动画 jQuery      更新时间：2023-09-26

我正在尝试为按钮创建重复的pulsing heartbeat视觉效果。

我不相信这可以在 CSS 中完成。

但是如何在jQuery或JS中对背景图像更改进行动画处理？

我希望能够执行以下操作 

$(this).animate({
     'background-image': '-webkit-linear-gradient(top, white, red)',
     'background-image': '-linear-gradient(top, white, red)'
 }, 4000);

但是jQuery不允许在CSS映射中使用非数值。

谢谢。

您可以使用

cssHooks编写自己的动画 - 创建一个假的CSS样式键，该键以您想要的方式设置背景并将数字作为其值，然后该假样式可以在.animate()中使用。

http://api.jquery.com/jQuery.cssHooks/

或者，如果您为另一个属性设置动画，则可以使用 step 回调手动进行更改（除非您使用的是非常旧版本的 jQuery，否则不建议这样做）。

相关文章：