предотвратить наведение эффекта до тех пор, пока предыдущий эффект не завершится

В настоящее время, если я навожу курсор на элемент, он отображает анимацию, которую я ищу, и скрывает другие элементы на странице.

Проблема, с которой я сталкиваюсь, заключается в том, что если я быстро наведу курсор на многие элементы div, он встанет в очередь и скроет элементы div один за другим. Я хочу просто позволить скрыть один div при наведении курсора, и когда все анимации будут завершены, функциональность снова заработает.

см. jsfiddle здесь Если вы быстро наведете курсор на элементы 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');
});