Question

I’m trying to animate a button on submit.

I have the following html:

<input id="save" val="save" />

and css:

#save { background: #ccc; }

.saving { background: #ccc url(/img/savingstripes.png) repeat; }

and jquery:

$('#save').click(function(e) { 

  e.preventDefault();

  $(this).addClass('saving').animate({backgroundPosition: '100px 0px'});

})

When I press this button, all I get is the class ‘saving’ added to the button but no animation.

What am I missing in this? (Note: I have the backgroundPosition plugin)

Answer 1

I see what happened… it’s your background: #ccc; declaration. For some reason it needs to be background-color: #ccc; and won’t work any other way. See here.