5

jQuery fadeIn() 関数の動作を認識しましたが、これは間違っているようです。

これらのコード スニペットは同等である必要があります。

function fadeIn1(){
    $("#fadediv1").stop(true).fadeIn(2000); 
}

function fadeOut1(){
    $("#fadediv1").stop(true).fadeOut(2000);            
}

と：

function fadeIn2(){
    $("#fadediv2").stop(true).fadeTo(2000, 1);  
}

function fadeOut2(){
    $("#fadediv2").stop(true).fadeTo(2000, 0);          
}

しかし実際には、例 1 の動作は奇妙です。自分でテストできるサンプルページを作成しました: http://neo1.fomalhaut.uberspace.de/virtualGuitar/example.html

うまく動かないのは上の方です。マウスで赤い div に入ると、青い div がフェードインし始めます。まだフェードインしている間はそのままにしておきます。フェードインが止まり、フェードアウトし始めます。フェードアウト中に再入力すると、再びフェードインを開始する必要がありますが、フリーズします。しかし、そうではありません。

下の例では、すべてが期待どおりに機能します。ここでは、fadeTo 関数を使用しました。

フェードインとフェードアウトはターゲットの不透明度が 1 と 0 のフェードトに似ているため、誰かが私が正しく、この動作が発生するべきではないと言うことができますか? それとも、私が間違っていて、これは何らかの理由でそのようになっているのでしょうか?

JQuery のバージョンは最新のもの (1.7.2) で、Chrome、Firefox、および Opera でテストされています。

4

1 に答える 1

2

あなたの問題は、 .stop() が実行されたときにどこにいても、要素に新しい不透明度スタイルを設定していることです。したがって、jQuery は、アニメーション化する必要がある不透明度は、fadeOut シーケンス中に停止したときの位置であると考えています。

デモで示したように、fadeTo() を使用できます。または、次のようなものを使用できます。

$("#fadediv1").stop().animate({'opacity':'toggle'}, 2000);

トグル オプションは、最大値/最小値を記憶します。したがって、CSS のように fadediv を設定するopacity: 0.5と、0 から 0.5 の間でアニメーション化されます。

于 2012-07-01T20:53:43.040 に答える