在上一个效果完成之前防止效果悬停

Question

目前，如果我将鼠标悬停在某个元素上，它会显示我正在寻找的动画，并隐藏页面上的其他元素。

我面临的问题是，如果我将鼠标悬停在许多 div 上，它会快速排队，并一个接一个地隐藏 div。我只想允许一个 div 在鼠标悬停时隐藏，当所有动画完成后允许该功能再次运行。

See jsfiddle here 如果您将鼠标快速悬停在 div 上，您会看到它们 appear/disappear 并且会不断重复。我想对此进行更多控制，并且只允许效果在动画完成后再次发生。

为方便起见，另请参阅下面的代码。

我尝试添加

if(!$(".wrapper").is(":animated")){....

但不幸的是，这没有用。

html

<div class="box-1">
  <div class="wrapper">
    <div class="background-out label-1 label"></div>
    <div class="background-over label-1 label"></div>
    <div class="background-info">
      <div class="text">Bla bla bla.</div>
    </div>
  </div>
</div>

<div class="box-2">
  <div class="wrapper">
    <div class="background-out label-2 label"></div>
    <div class="background-over label-2 label"></div>
    <div class="background-info">
      <div class="text">Bla bla bla</div>
    </div>
  </div>
</div>

css

.box-1 {
  position: absolute;
  top: 40%;
  left: 40%;
}

.box-2 {
  position: absolute;
  top: 10%;
  left: 40%;
}

.wrapper {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 0 20px;
}

.background-out,
.background-over {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.background-out,
.background-over,
.background-info {
  transition: opacity 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms, -moz-transform 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms, -webkit-transform 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms;
}

.background-info {
  position: absolute;
  left: 100px;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.2;
  transform-origin: 0% 50% 0px;
  transform: rotateY(-90deg);
  background-color: #f8f8f8;
}

.background-info .text {
  font-size: 12px;
  letter-spacing: 1px;
  text-align: center;
  width: 80%;
  margin-left: 10%;
  margin-top: 5px;
}

.background-out {
  transition-timing-function: linear;
}

.wrapper:hover .background-out {
  visibility: hidden;
}

.wrapper:hover .background-over,
.wrapper:hover .background-info {
  transform: translate3d(0px, 0px, 0px) rotateY(0deg);
  transition: opacity 1000ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms, -moz-transform 1000ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms, -webkit-transform 1000ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms;
  opacity: 1;
}

.background-over {
  background-color: transparent;
  opacity: 0;
  transform-origin: 100% 50% 0px;
  transform: rotateY(-90deg);
}

.label-1 {
  background: yellow;
}

.label-2 {
  background: pink;
  ;
}

.label {
  animation-duration: 1s;
  animation-name: slidein;
}

JS

$('.wrapper').hover(function() {
  $('.wrapper').not(this).fadeOut('slow');
  $('.wrapper .label').not(this).removeClass('label');
}, function() {
  $('.wrapper').not(this).fadeIn('slow');
});

Answer 1

您需要使用 jQuery .stop() 方法来防止动画排队。

https://jsfiddle.net/po34gv6v/11/

$('.wrapper').hover(function() {
  $('.wrapper').not(this).stop().fadeOut('slow');
  $('.wrapper .label').not(this).removeClass('label');
}, function() {
  $('.wrapper').not(this).stop().fadeIn('slow');
});

参见：https://api.jquery.com/stop/

在上一个效果完成之前防止效果悬停

prevent effect hover from occurring until previous effect has completed

javascript

css

jquery

jquery-hover