javascript - 鼠标移开后 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/