mouseenter/mouseleave字幕交換不能正常工作當移動鼠標太快

Question

我有一個問題，使用mouseenter/mouseleave觸發行爲，其中移動最快的目標元素太快導致不良行爲。我見過一些類似問題的線程，但似乎沒有解決我的問題。

我創建了一個帶有「標題」字幕的圖像網格。我試圖做到這一點，當用戶將鼠標懸停在網格中的圖像上時，標題標題淡出，並在其位置顯示「描述」標題。然後在mouseleave上反轉，標題標題重新出現。

我已經使用mouseenter/mouseleave和fadeIn/FadeOut來達到效果 - 它在塊之間緩慢移動時可以正常工作，但如果移動得太快，則「標題」和「描述」都會同時顯示。這裏是我的代碼：

$(".stage").mouseenter(function() { 
 
    var desc = $(".desc", this); 
 
    var title = $(".title", this); 
 
    title.fadeOut(200, "swing", function() { 
 
    desc.fadeIn(100, "swing"); 
 
    }); 
 
}).mouseleave(function() { 
 
    var desc = $(".desc", this); 
 
    var title = $(".title", this); 
 
    desc.fadeOut(0, "swing", function() { 
 
    title.fadeIn(0, "swing"); 
 
    }); 
 
});

.stage { 
 
    height: 200px; 
 
    width: 200px; 
 
    background-color: #1d2452; 
 
    color: white; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.stage > .caption { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-right: -50%; 
 
    transform: translate(-50%, -50%); 
 
    text-align: center; 
 
} 
 

 
.desc { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="stage"> 
 
    <div class="caption"> 
 
    <h2 class="title">Title</h2> 
 
    <p class="desc">Description Text</p> 
 
    </div> 
 
</div> 
 

 
<div class="stage"> 
 
    <div class="caption"> 
 
    <h2 class="title">Title</h2> 
 
    <p class="desc">Description Text</p> 
 
    </div> 
 
</div> 
 

 
<div class="stage"> 
 
    <div class="caption"> 
 
    <h2 class="title">Title</h2> 
 
    <p class="desc">Description Text</p> 
 
    </div> 
 
</div>

而且這裏的jsfiddle - https://jsfiddle.net/y16nufd7/1/

Answer 1

使用stop()來實現這一目標：

$(".stage").mouseenter(function() { 
 
    var desc = $(".desc", this); 
 
    var title = $(".title", this); 
 
    title.stop().fadeOut(200, "swing", function() { 
 
    desc.stop().fadeIn(100, "swing"); 
 
    }); 
 
}).mouseleave(function() { 
 
    var desc = $(".desc", this); 
 
    var title = $(".title", this); 
 
    desc.stop().fadeOut(0, "swing", function() { 
 
    title.stop().fadeIn(0, "swing"); 
 
    }); 
 
});

.stage { 
 
    height: 200px; 
 
    width: 200px; 
 
    background-color: #1d2452; 
 
    color: white; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.stage > .caption { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-right: -50%; 
 
    transform: translate(-50%, -50%); 
 
    text-align: center; 
 
} 
 

 
.desc { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="stage"> 
 
    <div class="caption"> 
 
    <h2 class="title">Title</h2> 
 
    <p class="desc">Description Text</p> 
 
    </div> 
 
</div> 
 

 
<div class="stage"> 
 
    <div class="caption"> 
 
    <h2 class="title">Title</h2> 
 
    <p class="desc">Description Text</p> 
 
    </div> 
 
</div> 
 

 
<div class="stage"> 
 
    <div class="caption"> 
 
    <h2 class="title">Title</h2> 
 
    <p class="desc">Description Text</p> 
 
    </div> 
 
</div>

Answer 2

值得注意的是，這也可以在沒有JS的情況下實現。 CSS爲我們提供了我們需要懸停動畫轉換：

.stage { 
 
    height: 200px; 
 
    width: 200px; 
 
    background-color: #1d2452; 
 
    color: white; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.title, 
 
.desc { 
 
    display: block; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
    top: 50%; 
 
    text-align: center; 
 
    transform: translate(0%, -50%); 
 
} 
 

 
.desc { 
 
    opacity: 0; 
 
} 
 

 
.stage:hover .caption .title { 
 
    opacity: 0; 
 
    -webkit-transition: opacity 200ms cubic-bezier(.02, .01, .47, 1); 
 
    -moz-transition: opacity 200ms cubic-bezier(.02, .01, .47, 1); 
 
    -ms-transition: opacity 200ms cubic-bezier(.02, .01, .47, 1); 
 
    -o-transition: opacity 200ms cubic-bezier(.02, .01, .47, 1); 
 
} 
 

 
.stage:hover .caption .desc { 
 
    opacity: 1; 
 
    -webkit-transition: opacity 100ms cubic-bezier(.02, .01, .47, 1) 200ms; 
 
    -moz-transition: opacity 100ms cubic-bezier(.02, .01, .47, 1) 200ms; 
 
    -ms-transition: opacity 100ms cubic-bezier(.02, .01, .47, 1) 200ms; 
 
    -o-transition: opacity 100ms cubic-bezier(.02, .01, .47, 1) 200ms; 
 
}

<div class="stage"> 
 
    <div class="caption"> 
 
    <h2 class="title">Title</h2> 
 
    <p class="desc">Description Text</p> 
 
    </div> 
 
</div> 
 

 
<div class="stage"> 
 
    <div class="caption"> 
 
    <h2 class="title">Title</h2> 
 
    <p class="desc">Description Text</p> 
 
    </div> 
 
</div> 
 

 
<div class="stage"> 
 
    <div class="caption"> 
 
    <h2 class="title">Title</h2> 
 
    <p class="desc">Description Text</p> 
 
    </div> 
 
</div>