javascript - 如何在 jQuery 中动画背景图像的变化？

Question

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

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

但是，您如何为jQueryor中的背景图像更改设置动画JS？

我希望能够做到以下几点

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

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

谢谢。

Answer 1

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

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

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