jQuery UI Toggle Hover Not Alway Toggling

Question

В следующей демонстрации я использую jQuery UI toggle, чтобы заголовок отображался при наведении и спрятался, когда он не зависал над этим изображением. Хотя он изначально, похоже, работает. Если вы быстро перемещаете мышь по ящикам, а на другой, предыдущие заголовки ящиков иногда остаются открытыми, а не прячутся. Есть ли проблема в этой проблеме, например, требующая большей/меньшей задержки или что-то еще, чтобы гарантировать, что заголовок всегда будет исчезать, когда ваша мышь не находится над изображением?

http://codepen.io/anon/pen/BNdggv

$(".product").hover(function() { 
    $(this).find(".product-caption.odd").toggle("slide",{direction:"left"},500); 
    $(this).find(".product-caption.even").toggle("slide",{direction:"right"},500); 

}); 

Answer 1

Добавить в вызове остановки() перед переключением(), чтобы не суммируется до анимации.

$(this).find(".product-caption.odd").stop().toggle("slide",{direction:"left"},500);

Answer 2

Попробуйте с использованием .stop()

$(".product").hover(function() { 
 
    $(this).find(".product-caption.odd").stop(true, true).toggle("slide", { 
 
    direction: "left" 
 
    }, 500); 
 
    $(this).find(".product-caption.even").stop(true, true).toggle("slide", { 
 
    direction: "right" 
 
    }, 500); 
 
});

body { 
 
    margin: 0; 
 
    background-color: gray; 
 
    padding: 0; 
 
} 
 
.product-caption { 
 
    width: 50%; 
 
    height: 230px; 
 
    background: #fff; 
 
    float: left; 
 
    text-align: center; 
 
    display: none; 
 
} 
 
.product-caption.even { 
 
    float: right; 
 
} 
 
.product-caption h3 { 
 
    color: #5C5C5C; 
 
    text-transform: uppercase; 
 
} 
 
.product-caption p { 
 
    color: #9B9B9B; 
 
} 
 
.product-caption a { 
 
    text-transform: uppercase; 
 
    color: #F8981D; 
 
    font-weight: bold; 
 
    text-decoration: none; 
 
} 
 
.product { 
 
    background-image: url(https://placeholdit.imgix.net/~text?txtsize=52&txt=554%C3%97230&w=554&h=230); 
 
    width: 554px; 
 
    height: 230px; 
 
} 
 
.btn { 
 
    border: 1px solid red; 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
<div class="product"> 
 
    <div class="product-caption odd"> 
 
    <h3>One</h3> 
 
    <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum.</p> 
 
    <p><a class="btn btn-default" href="#">Link</a> 
 
    </p> 
 
    </div> 
 
</div> 
 

 
<hr /> 
 

 
<div class="product"> 
 
    <div class="product-caption even"> 
 
    <h3>Two</h3> 
 
    <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum.</p> 
 
    <p><a class="btn btn-default" href="#">Link</a> 
 
    </p> 
 
    </div> 
 
</div> 
 

 
<hr /> 
 

 
<div class="product"> 
 
    <div class="product-caption odd"> 
 
    <h3>Three</h3> 
 
    <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum.</p> 
 
    <p><a class="btn btn-default" href="#">Link</a> 
 
    </p> 
 
    </div> 
 
</div>

http://codepen.io/anon/pen/yNPXeE