1

要素をフェードインおよびフェードアウトする 2 つの関数を作成したいと考えています。

これは私がこれまで行ってきたことですが、これの問題は、ホバーされた要素にいる間にマウスを動かすと、振動し始めることです:| 振動しないで正しく動作させるにはどうすればよいですか？

<script language="javascript" type="text/javascript">
 function hoverIn(target, speed){
     $(target).fadeIn(speed); 
 }

 function hoverOut(target, speed){
     $(target).fadeOut(speed); 
 }
</script>

LIVE PREVIEW - ライブで問題をチェック

4

1 に答える 1

1

これを行うためのより良い方法は、目立たないスクリプトを使用することです。主に必要なのは、次の.stop()ように、前のアニメーションを停止する呼び出しです。

<script type="text/javascript">
 function hoverIn(target, speed){
     $(target).stop(true, true).fadeIn(speed); 
 }

 function hoverOut(target, speed){
     $(target).stop(true, true).fadeOut(speed); 
 }
</script>

子供が出入りするときに発火するためmouseover、これはまだ問題です。mouseoutただし、と を.hover()使用するmouseenterとmouseleave、同じ問題が発生せず、「振動」の問題が解消されます。

目立たないバージョンは次のようになります。

$(function() {
  $("ul > li").hover(function() {
    $(this).find("ul").stop(true, true).fadeIn('fast');
  }, function() {
    $(this).find("ul").stop(true, true).fadeOut('fast');
  });
});​

あなたはそれを見ることができます ここ、またはさらに短いバージョン:

$(function() {
  $("ul > li").hover(function() {
    $(this).find("ul").stop(true, true).animate({opacity: 'toggle'}, 'fast');
  });
});​

ここでテストできます。これらの目立たないアプローチはすべてインライン JavaScript を使用せず、複数の子メニューで機能することに注意してください。

于 2010-09-27T12:48:50.680 に答える