由网友(一个人的相濡以沫)分享简介：I have this code that fades a div over another one upon mouseover, and fades out when the cursor leave the viewing area.EXAMPLE: http://jsfiddle.net/3vgbemgu/$(...

I have this code that fades a div over another one upon mouseover, and fades out when the cursor leave the viewing area.

EXAMPLE: http://jsfiddle.net/3vgbemgu/

$('.under').hover(function () {
$('.over').fadeIn();
}, function () {
$('.over').fadeOut();
});

however, if the user moves the mouse over the area quickly multiple times, the animation creates a queue, meaning the div fades in and out various times one after another. This is much more obvious is there are multiple instances of this animation on screen, or if the fade in and out times are longer.

How would I stop the animation retriggering while it is still occurring the first time?

解决方案

You can use jquery .stop():

$('.under').hover(function() {
  $('.over').stop(true, true).fadeIn();
}, function() {
  $('.over').stop(true, true).fadeOut();
});

.frame {
  position: absolute;
  width: 400px;
  height: 300px;
}
.under {
  width: 100%;
  height: 100%;
  z-index: 1;
}
.under img {
  width: 100%;
  height: 100%;
}
.over {
  position: absolute;
  width: 100%;
  height: 100%;
  font-size: 36px;
  text-align: center;
  color: yellow;
  background: rgba(64, 64, 64, 0.5);
  top: 0;
  left: 0;
  z-index: 2;
  display: none;
}
span {
  margin-left: auto;
  margin-right: auto;
  background-color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="frame">
  <div class="under">
    <img src="http://www.thetimes.co.uk/tto/multimedia/archive/00342/114240651_cat_342943c.jpg">
    <div class="over">
      <a href="http://www.w3schools.com/css/css_positioning.asp">
        </br><span>Link 1</span>
      </a>
      </br>
      </br>
      </br><a href="http://smallbusiness.chron.com/stretch-image-horizontally-css-43652.html"><span>Link 2</span></a>
    </div>
  </div>
</div>