は、前のエフェクトが完了するまでエフェクトホバーが発生しないようにします。

Question

現在、エレメントの上にカーソルを置くと、探しているアニメーションが表示され、ページの他のエレメントは非表示になります。

私が直面している問題は、多くの部門をすばやく表示するとすぐに表示され、divを順番に隠すということです。私はちょうど1つの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/