0

I am trying to create a repeating pulsing heartbeat visual effect for a button.

I don't believe this can be done in CSS.

But how do you animate a background-image change in jQuery or JS?

I want to be able to do the following 

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

But jQuery does not allow non-numerical value in the CSS map.

Thanks.

Narendra Jadhav
  • 10,052
  • 15
  • 33
  • 44
JMan
  • 1,815
  • 5
  • 21
  • 34
  • check this http://stackoverflow.com/questions/2983957/animate-background-image-change-with-jquery – Dhiraj May 15 '12 at 18:48
  • You are correct that you cannot animate css backgrounds with css3 animations (currently). You can animate background images (Chrome 18 only at this point). jQuery doesn't allow direction animation of gradient's either. – mrtsherman May 15 '12 at 18:52

1 Answers1

0

You can code your own animation using cssHooks - create a fake CSS style key that sets the background the way you want and takes a number as its value, then that fake style can be used in .animate().

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

Alternatively, if you animate another property you can use the step callback to manually make your changes (not recommended unless you're using a very old version of jQuery).

kitti
  • 14,663
  • 31
  • 49