2012-02-09 10 views
3

私は非常に単純なdivを持っています。その後、マウスがdivを離れると、それはフェードアウトします。JQueryフェードイン/アウトは1回だけ動作します

問題:フェードイン/アウトは一度しか機能しません。私がdivに2回目にマウスを置くと、フェードインしません。

What's going wrong? JSFiddle:http://jsfiddle.net/hWyUn/3/ fadeToを使用して

<div id="test" style="opacity: 0; width: 100px; height: 100px; background-color: red;"> 
</div> 

$("#test").mouseenter(function() 
        { 
         $(this).css("opacity","1").fadeIn(); 
        }); 

$("#test").mouseleave(function() 
        { 
         $(this).fadeOut(); 
        }); 

答えて

4

は私の仕事:ここ

$("#test").mouseenter(function() 
    { 
     $(this).fadeTo("slow", 1); 
    }); 

$("#test").mouseleave(function() 
    { 
     $(this).fadeTo("slow", 0); 
    }); 

http://jsfiddle.net/hWyUn/4/

3

は、jQueryのドキュメントを参照してください。 fadeOut()は終了後、displayプロパティをnoneに設定します。効果的にあなたのページからそれを削除します。

http://api.jquery.com/fadeOut/

0

問題を修正しました。 ...

jsFiddle

0

をフィドルをチェック あなたはいつもの代わりに中とフェードアウトの不透明度をアニメーション化するjQueryのアニメーションを使用して試みることができます。短いコードかもしれません。

不透明度にアニメーションを設定しても、表示が「なし」に設定されることはありません。そのため、フェードアウトした後でも元気に戻すことができます。

See my jsFiddle here

1

これは、要素が隠されている場合にのみ動作します。 $(要素).fadeIn()の前に$(要素).css( 'display'、 'none')を実行すると、要素の表示をnoneに設定できます