ユーザーがボタンの上を移動すると、jqueryのアニメーション機能を使用してボタンの矢印イメージを変更しようとしていますが、機能しません。ここに私のcodeとこれは私のスクリプトです。jqueryのアニメーション機能が動作しない
$('.Button').mouseenter(function(){
$('.arrow-image').animate({
'background-image':'url(images/sp-images.png)',
'background-repeat':'no-repeat',
'background-position':'-85px -0px'
},5000);
});
あなたの '背景位置'： ' - 85px -0px'、
'background-position-x':'-85px',
'background-position-y':'0px'
XepterXが正しいとのように変更します。jQuery documentation for .animate()から http://jsfiddle.net/YSGYz/7/
：
アニメーションのプロパティと値すべてのアニメーションのプロパティは、 のアニメーションにする必要があります下記に記載されている以外は数字を入力してください。ほとんどの の数値ではないプロパティは、jQuery.Color（）プラグインが使用されていない限り、 背景色に設定することはできません（たとえば、幅、高さ、または左にアニメーション表示することはできません）。 プロパティ値は、別の場合を除きピクセル数として扱われます。 が指定されています。該当する場合は単位emと％を指定できます。
これは、新しい画像または繰り返し値にアニメーションできないことがわかります。数値であるスタイルプロパティと、数値であるその他のプロパティをアニメートできます。それがjQuery .animate()の仕組みです。
イメージをゆっくりと変更したい場合は、古いイメージが表示され、新しいイメージが表示されないオブジェクトが2つ必要です。 CSSを使用して、2つのオブジェクトが正確に重なり合うようにします。新しいイメージには.fadeIn()、古いイメージには.fadeOut()を使用できます。
XepterXに示されているように、background-position-xとbackground-position-yは単一の数字で表されているため、アニメーションできますが、画像のURLまたは繰り返し値はアニメートできません。
希望すれば、このコードは役に立ちます。私はいくつかの目的のために背景画像を使用していますが、私は物事を期待どおりに動作させようとしていました。 :)ここに矢印をアニメーション化しようとしています！
1つの変更を加えました - むしろ背景イメージを使用して、私はimgタグを使用しました。
は、ここでそれを確認してください。http://jsfiddle.net/ylokesh/HvdZP/1/
をあなたは確実に今では、コードの書式設定を適用する必要があり、29の他の質問を掲載しました。あなたの質問を尋ねる/編集するときに、テキストエリアの右側に表示されている** How to Format **ボックスと、その上の** [？] **リンクを参照してください。 –
別途：ライブリンク（http://jsbin.comまたはhttp://jsfiddle.net）はあなたの質問に素晴らしい*アドオン*ですが、常に質問自体*に関連するコード/マークアップ*を含みます。理由：http://meta.stackexchange.com/questions/118392/add-stack-overfow-faq-entry-or-similar-for-putting-code-in-thequestion –
私は、 imageとbackground-repeatは、開始値と終了値がないためアニメートできるものです。値は1つだけです。あなたは何を達成しようとしていますか？ – jfriend00