Question

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

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

See jsfiddle here 如果你快速悬停在div上，你会看到它们出现/消失，并且不断重复。我想要更多地控制它，并且只有在动画完成后才允许效果再次发生。

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

我尝试添加

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/

防止效果悬停发生，直到前一个效果完成

1 个答案: