функция mouseover, возникающая несколько раз в очереди

Question

У меня есть этот код, который исчезает над другим над наведением мыши и исчезает, когда курсор покидает область просмотра.

Пример: http://jsfiddle.net/3vgbemgu/

$('.under').hover(function() { 
$('.over').fadeIn(); 
}, function() { 
$('.over').fadeOut(); 
}); 

Однако, если пользователь перемещает мышь над областью быстро несколько раз, анимация создает очередь, означая ДИВ выцветает и вне разное время один за другим. Это гораздо более очевидно: на экране есть несколько экземпляров этой анимации, или если время затухания увеличивается и длится.

Как остановить повторную анимацию анимации, пока она все еще встречается в первый раз?

Answer 1

Вы можете использовать JQuery .stop():

$('.under').hover(function() { 
 
    $('.over').stop(true, true).fadeIn(); 
 
}, function() { 
 
    $('.over').stop(true, true).fadeOut(); 
 
});

.frame { 
 
    position: absolute; 
 
    width: 400px; 
 
    height: 300px; 
 
} 
 
.under { 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 1; 
 
} 
 
.under img { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.over { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    font-size: 36px; 
 
    text-align: center; 
 
    color: yellow; 
 
    background: rgba(64, 64, 64, 0.5); 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 2; 
 
    display: none; 
 
} 
 
span { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    background-color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="frame"> 
 
    <div class="under"> 
 
    <img src="http://www.thetimes.co.uk/tto/multimedia/archive/00342/114240651_cat_342943c.jpg"> 
 
    <div class="over"> 
 
     <a href="http://www.w3schools.com/css/css_positioning.asp"> 
 
     </br><span>Link 1</span> 
 
     </a> 
 
     </br> 
 
     </br> 
 
     </br><a href="http://smallbusiness.chron.com/stretch-image-horizontally-css-43652.html"><span>Link 2</span></a> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Вы можете использовать .mouseenter() и .mouseleave() вместо этого. Они срабатывают только один раз.

$('.under').mouseenter(function() { 
    $('.over').fadeIn(); 
}).mouseleave(function() { 
    $('.over').fadeOut(); 
});