mouseover function occurring multiple times in a queue

问题

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?

回答1:

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>

回答2:

You can use .mouseenter() and .mouseleave() instead. They are triggered only once.

$('.under').mouseenter(function() {
  $('.over').fadeIn();
}).mouseleave(function() {
  $('.over').fadeOut();
});

来源：https://stackoverflow.com/questions/27019972/mouseover-function-occurring-multiple-times-in-a-queue

标签

jquery

hover

fadein

fadeout