新闻提交按钮的动画背景？

Question

我正在尝试设置动画上的按钮。

我有以下html：

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

和css：

#save { background: #ccc; }

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

和jquery：

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

  e.preventDefault();

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

})

当我按下这个按钮时，我得到的只是“保存”类添加到按钮但没有动画。

我错过了什么？ （注意：我有backgroundPosition plugin）

Answer 1

我看到发生了什么......这是你的background: #ccc;声明。出于某种原因，它需要background-color: #ccc;并且不会以任何其他方式工作。 See here

Answer 2

#save { background: #ccc; }

此CSS正在覆盖您的背景图片

使用

#save { background-color: #ccc; }

Answer 3

您还可以通过添加输入ID来为.saving CSS类添加一些权重：

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

http://jsfiddle.net/s5Q5N/