jQueryフェード停止エラー：jQuery（ "。box"）。stop（）。fadeIn（）;

Question

このコードは機能していませんが、何が間違っていますか？

Tnks。

var x; 
    x=jQuery(document); 
    x.ready(inicializarEventos); 

    function inicializarEventos() 
    { 
     var x; 
     x=jQuery(".Caja2"); 
     x.hover(entraMouse,saleMouse); 
    } 


    function entraMouse() 
    { 
     jQuery(".Caja2").stop().fadeOut(); 
    } 

    function saleMouse() 
    { 
     jQuery(".Caja2").stop().fadeIn(); 
    } 

Answer 1

Dreas Grechからのコメントは正しいです。要素上で.stop（）メソッドを呼び出す前に、要素がアニメーション化されているかどうかをチェックする必要があります。あなたはマウスがその上に配置されたときにフェードアウトしますボックスを持ちたいという

function entraMouse() { jQuery(".Caja2:animated").stop();jQuery(".Caja2").fadeOut(); } 
function saleMouse() {jQuery(".Caja2:animated").stop();jQuery(".Caja2").fadeIn(); } 

Answer 2

それは（私に）表示され、マウスが離れて移動されたときに再び表示されます：これを試してみてください。これは最初は現実よりもトリッキーです。

$().fadeOut()を呼び出すと、jQueryはフェードをアニメーション化し、その要素にdisplay: noneを設定します。要素が表示リストから削除されるので、mouseOutイベントが発生し、fadeIn（）エフェクトが開始されます。これにより、あなたのマウスがその領域に乗っている限り、mouseInとmouseOutの無限ループが発生します。

$().fadeTo()メソッドを使用してみてください。次の例では、マウスが入るとopacityプロパティを0.0に、マウスが離れると1.0にアニメートします。要素は実際には隠されていないので（表示されない）、mouseOutイベントは正しく発生することができます。

jQuery(document).ready(inicializarEventos); 

function inicializarEventos() { 
    $(".Caja2").hover(entraMouse, saleMouse);   
} 

function entraMouse() { 
    jQuery(this).fadeTo("slow", 0.0) 
} 

function saleMouse() { 
    jQuery(this).fadeTo("slow", 1.0) 
} 

今後、「コードが機能していない」と思われる理由を説明してください。コードがどのように機能するか、現在の結果は何かを定義する必要があります。それは私の他の人があなたの質問に答える方法をよく知るのに役立ちます。