鼠標移出后，jQuery工具提示懸停仍在運行

Question

我有一個簡單的工具提示：

CSS：

  html {
      font: 100% calibri;
    }

    ul {
      margin: 100px 0 0;
      padding: 0;
      list-style-type: none;
    }
    ul li {
      padding: 0;
      margin: 0 2px;
      float: left;
      position: relative;
      text-align: center;
      background-color: #ccc;
    }
    ul li a {
      padding: 14px 10px;
      display: block;
      color: #000;
      width: 144px;
      text-decoration: none;
      font-weight: bold;
    }
    ul li em {
      background-color: #ccc;
      width: 180px;
      height: 45px;
      position: absolute;
      top: -85px;
      left: -15px;
      text-align: center;
      padding: 20px 12px 10px;
      font-style: normal;
      z-index: 2;
      display: none;
    }

HTML：

  <ul>
    <li>
      <a href="#">Home</a>
      <em>This takes you home</em>
    </li>

    <li>
      <a href="#">Services</a>
      <em>This shows you our serivces</em>
    </li>

    <li>
      <a href="#">About Us</a>
      <em>This shows things about us</em>
    </li>

    <li>
      <a href="#">Contact Us</a>
      <em>Your can message us.</em>
    </li>
  </ul>

jQuery的：

$(document).ready(function() {

    $('ul a').hover(function(){
      $(this).next('em')
      .animate({
        opacity: 'show',
        top: '-75'}, 'slow');
    }, 
      function(){
        $(this).next('em')
        .animate({
          opacity: 'hide',
          top: '-85'
        }, 'fast');
    });

});

結果：

https://jsfiddle.net/fsxm1Ldt/

如果我在工具提示上來回移動鼠標幾次，它就會進出，並且直到完成我進出鼠標的次數后才會停止。 如何防止它這樣做？

Answer 1

之所以發生這種情況，是因為動畫要排隊，然后依次執行。

jQuery有一個稱為.stop()的函數，用於這種情況。 它使您可以停止當前動畫並清除其他任何動畫的隊列。 這樣可以防止您看到閃爍的效果。

您的代碼變為：

$('ul a').hover(
    function () {
        $(this).next('em')
            .stop(true, true).animate({
                opacity: 'show',
                top: '-75'
            }, 'slow');
        },
    function () {
        $(this).next('em')
            .stop(true, true).animate({
                opacity: 'hide',
                top: '-85'
            }, 'fast');
    }
);

它正在起作用： https : //jsfiddle.net/fsxm1Ldt/2/

Answer 2

您根本不需要Javascript或jQuery。 使用css transtition和:hover代替：

ul li em {
  /* remove display: none; */
  opacity: 0;
  transition-duration: 0.4s;
}
ul li a:hover + em {
  opacity: 1;
  top: -75px;
}

https://jsfiddle.net/fsxm1Ldt/3/