JQuery - マウスセンターでdivを表示

次のHTMLを作成しました。黄色のボックスには画像のサムネイルが含まれています。サムネイルをマウスオーバーすると、サムネイルの上にビューリンクが表示されます。JQuery - マウスセンターでdivを表示

しかし、マウスを速く動かすと、リンクdivがちらつきます。

ここにコードがあります。コピーしてhtmlとして貼り付けてテストすることができます。

<html> 
<head> 
    <title>Image Gallery</title> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 

      $('.divImage').mouseenter(function() { 
       var vl = $('#viewlink'); 
       var vlpos = $(this).position(); 
       vl.css({ 'top': (vlpos.top + ($(this).height() - vl.height())), 'left': vlpos.left, position: 'absolute' }); 
       vl.fadeTo('1', 0.5); 
       vl.css('display', 'block'); 
      }); 

      $('.divImage').mouseleave(function (event) { 
       if (event.toElement.id != 'viewlink') { 
        var vl = $('#viewlink'); 
        vl.fadeTo('1', 0.0, function() { 
         vl.css('display', 'block'); 
        }); 
       } 
      }); 

      $('#viewlink').mouseleave(function (event) { 
       $(this).fadeTo('1', 0.0, function() { 
        $(this).css('display', 'block'); 
       }); 

      }); 
     });   
    </script> 
    <style type="text/css"> 
     .divImage 
     { 
      background-color: Yellow; 
     } 
    </style> 
</head> 
<body> 
    <div id="viewlink" style="width: 100px; height: 30px; display: none; background-color: gray; 
     text-align: center; line-height: 30px; vertical-align: middle; z-index: 1000;"> 
     <a href="Javscript:;" style="text-decoration: underline">View</a></div> 
    <div style="width: 398px; height: 518px; border: 1px solid #DADADA; float: left; 
     overflow-y: auto; overflow-x: hidden"> 
     <div style="width: 378px; height: 278px; margin: 10px; background-color: #FFFFFF"> 
      <table style="margin: 0px; padding: 0px; width: 100%;" cellpadding="0" cellspacing="0"> 
       <tr> 
        <td align="center"> 
         <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA"> 
         </div> 
        </td> 
        <td align="center"> 
         <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA"> 
         </div> 
        </td> 
        <td align="center"> 
         <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA"> 
         </div> 
        </td> 
       </tr> 
       <tr> 
        <td colspan="3" style="height: 20px;"> 
        </td> 
       </tr> 
       <tr> 
        <td align="center"> 
         <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA"> 
         </div> 
        </td> 
        <td align="center"> 
         <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA"> 
         </div> 
        </td> 
        <td align="center"> 
         <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA"> 
         </div> 
        </td> 
       </tr> 
       <tr> 
        <td colspan="3" style="height: 20px;"> 
        </td> 
       </tr> 
       <tr> 
        <td align="center"> 
         <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA"> 
         </div> 
        </td> 
        <td align="center"> 
         <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA"> 
         </div> 
        </td> 
        <td align="center"> 
         <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA"> 
         </div> 
        </td> 
       </tr> 
       <tr> 
        <td colspan="3" style="height: 20px;"> 
        </td> 
       </tr> 
       <tr> 
        <td align="center"> 
         <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA"> 
         </div> 
        </td> 
        <td align="center"> 
         <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA"> 
         </div> 
        </td> 
        <td align="center"> 
         <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA"> 
         </div> 
        </td> 
       </tr> 
       <tr> 
        <td colspan="3" style="height: 20px;"> 
        </td> 
       </tr> 
       <tr> 
        <td align="center"> 
         <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA"> 
         </div> 
        </td> 
        <td align="center"> 
         <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA"> 
         </div> 
        </td> 
        <td align="center"> 
         <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA"> 
         </div> 
        </td> 
       </tr> 
      </table> 
     </div> 
    </div> 
</body> 
</html>

FF4.0でもmouseleaveは呼び出されません。何か案は？

出典

2011-06-29 NLV

ピクチャが入力されたときにフェードインしたいのですが、ピクチャが残っているとフェードアウトしますか？ – MeLight

私はあなたがアニメーションキューに蓄積されていると思います。追加のアニメーションコールの前にstop()を呼び出すことでこれを防止します。

編集したコード（各fadeTo()前stop()の追加に注意してください）：

$('.divImage').mouseenter(function() { 
      var vl = $('#viewlink'); 
      var vlpos = $(this).position(); 
      vl.css({ 'top': (vlpos.top + ($(this).height() - vl.height())), 'left': vlpos.left, position: 'absolute' }); 
      vl.stop(true,true).fadeTo('1', 0.5); 
      vl.css('display', 'block'); 
     }); 

     $('.divImage').mouseleave(function (event) { 
      if (event.toElement.id != 'viewlink') { 
       var vl = $('#viewlink'); 
       vl.stop(true,true).fadeTo('1', 0.0, function() { 
        vl.css('display', 'block'); 
       }); 
      } 
     }); 

     $('#viewlink').mouseleave(function (event) { 
      $(this).stop(true,true).fadeTo('1', 0.0, function() { 
       $(this).css('display', 'block'); 
      }); 

});

出典

2011-06-29 14:54:12 Brent

パーフェクト。魅力のように働いた。ありがとうございました。 – NLV

@NLVまた、 'hover（）'に関する@ Sparky672の答えを見てください。これは 'mouseenter（）'と 'mouseleave（）'メソッドを組み合わせています。 – Brent

あなたは、CSS属性 "可視性" を変更することができます：
$(".element").addClass("visible");

.hidden { visibility: hidden; } .visible { visibility: visible; }

ホープ、このことができます！
NS

出典

2011-06-29 14:34:27

hover()は、ちらつきのない非常に良い作品。

$('.divImage').hover(enter, leave); 

function enter() { // mouse enter 
    var vl = $('#viewlink'); 
    var vlpos = $(this).position(); 
    vl.css({ 'top': (vlpos.top + ($(this).height() - vl.height())), 'left': vlpos.left, position: 'absolute' }); 
    vl.fadeTo('1', 0.5); 
    vl.css('display', 'block'); 
}; 

function leave(event) { // mouse leave 
if (event.toElement.id != 'viewlink') { 
     var vl = $('#viewlink'); 
     vl.fadeTo('1', 0.0, function() { 
     vl.css('display', 'block'); 
     }); 
    } 
};

出典

2011-06-29 15:01:30 Sparky

JQuery - マウスセンターでdivを表示

答えて

関連する問題