在队列中多次出现鼠标悬停功能 [英] mouseover function occurring multiple times in a queue

问题描述

这段代码在鼠标悬停时会淡出div，当光标离开查看区域时会淡出div。

示例： http://jsfiddle.net/3vgbemgu/

 < （）。code> $（'。under'）。hover（function（）{
 $（'。over'）。fadeIn（）; 
}，function（）{
 $ （'.over'）。fadeOut（）; 
}）;但是，如果用户将鼠标快速移动多次，该动画将创建一个队列，这意味着div会陆续淡出和淡入。这更明显的是，这个动画在屏幕上有多个实例，或者淡入淡出时间更长。
 
 
 
我将如何停止动画重新同时播放它仍然是第一次发生？
解决方案
您可以使用jquery   .stop（） ： 
 $ b 
 
 
  $（ '。'）。hover（function（）{$（'。over'）。stop（true，true）.fadeIn（）;}，function（）{$（'。over'）。stop（true，true ）.fadeOut（）;}）;  

位置：绝对;宽度：400px; height：300px;}。{width：100％;身高：100％; z-index：1;}。img {width：100％;身高：100％;}。宽度：100％;身高：100％; font-size：36px; text-align：center;颜色：黄色;背景：rgba（64,64,64,0.5）; top：0;左：0; z-index：2; display：none;} span {margin-left：auto; margin-right：auto; < script src =};}

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>

这篇关于在队列中多次出现鼠标悬停功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！