动画背景图像如何在jQuery中发生变化？

Question

我正在尝试为按钮创建重复的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地图中使用非数值。

感谢。

Answer 1

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

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

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