0

背景のマウスオーバーをアニメーション化するためにこのコードを作成しましたが、機能せず、他の背景を変更するだけで、関数を使用しても効果が表示されませんanimate。

$(".b_header").mouseover(function() {

$(this).css("background-image","url(images/bot/head_down.png)");



/*

Also I've tried other effects and nothing 

$(this).css( {backgroundPosition: "0 0"} );


$(this).animate(
{backgroundPosition:"(-20px -53px)"}, 
{duration:500});
*/

$(this).animate({ opacity: 5 }, 3000);

});
4

2 に答える 2

4

まず、document.readyを使用したことを確認してください

$(document).ready(function() {
     ......
     $(this).animate({ opacity: 1 }, 3000);
});

次に、CSSファイルで、クロスブラウザの不透明度属性を設定していることを確認します

opacity: 0; /* Chrome 4+, FF2+, Saf3.1+, Opera 9+, IE9, iOS 3.2+, Android 2.1+ */
filter: alpha(opacity=0); /* IE6-IE8 */

最後に、不透明度の値の範囲は0（非表示）から1（不透明）で、5の値はありませんが、1のように正常に機能します。

これが実際の例です=> http://jsfiddle.net/abdullahdiaa/PxGwz/

于 2012-08-03T18:02:49.580 に答える
1

jQueryのanimate関数は、複数の値をとるCSSプロパティでは機能しません。通常、個々の値を個別にアニメーション化できます。したがって、それは、 background-positionの両方の値をアニメーション化しようとしても機能しない理由を説明します。

jQueryドキュメント.animate()から：

アニメーション化されたすべてのプロパティは、単一の数値にアニメーション化する必要があります。

不透明度をアニメーション化する場合、5の値ではなく0から1の値を取ります。アニメーションが不透明度で動作することを確認するには、オブジェクトはアニメーション化するのとは異なる不透明度で開始する必要があります。

不透明度をアニメーション化する実際の例を次に示します。http：//jsfiddle.net/jfriend00/zCL7S/

于 2012-08-03T17:54:38.580 に答える