私はcssの画像を持つ入力ボタンを持っています。 cssからの画像は、入力ボタンが上に置かれたりクリックされたりすると背景位置が変わります。jQueryを使ってゆっくりとアニメーション化するボタン
たとえば、
input { height: 50px; width: 100px; background-position: 0 0; }
input:hover { background-position: 0 -60px; }
input:active { background-position: 0 -120px; }
jQueryを使用して、自動的に変更するのではなく、ゆっくりと滑らかなフェードを作るにはどうすればよいですか？
代わりのCSSを使用したが、必要に応じてjQueryのfadeTo()クリック/ホバーイベントをバインドします。
あなたはまた、関連する機能を見てみることができ、フェードイン（）、フェードアウト（）、およびfadeToggle（）。
$('input').hover(function(){
$(this).fadeTo('slow', 0.75);
},
function(){
$(this).fadeTo('slow', 1.0);
});
あなたはこのプラグインを試みることができる：
を見てみましょう。ただ、たとえば
：
$('#myElement')
.css({backgroundPosition: "0 0"})
.mouseover(function(){
$(this).stop().animate(
{backgroundPosition:"(0 -150px)"},
{duration:200})
})
.mouseout(function(){
$(this).stop().animate(
{backgroundPosition:"(0 0)"},
{duration:200})
})
EDIT：もちろん
あなたが同様のonClickイベントを追加する必要があります。
私は多分私の答えはを通じて考えていなかった、[OK]を – cnotethegr8
... ..その他のスタイルは、このような高さとして働くが、私はbackgroundPositionをしようとすると、それは仕事をdosntアニメーション使用の非常に多くの異なるバリエーションを試してみました十分な - それは、バックグラウンドの位置が元々は動作しない可能性があります（私は今テストすることはできません）。既にShankarSangoliが指摘しているように、次のプラグインを試しましたか？ http://plugins.jquery.com/project/backgroundPosition-Effect –
私はこれをやっていません。しかし、それは私のクラスの代わりに入力し、IDの代わりに入力した後に動作しない可能性がありますか？ – cnotethegr8
何らかの理由で、バックグラウンドの位置がうまく動作しないのですが、これはまさに私が必要とするものではありませんが、ありがとう。 – cnotethegr8