我有滑块问题。它没有一个正常工作，对我来说很奇怪，情况。当我从一个点快速鼠标悬停到另一个点时，它不会等到上一个动画结束并且两个文本重叠。年龄较大且更聪明的人可以帮助我吗？
项目的HTML结构：
<section class="product-section">
<div class="vertical-text vertical-text-custom-5">
Pluginy
</div>
<div class="carrousel-image-container-1 product-release-management">
<i class="image-carrousel-1"></i>
</div>
<div class="carrousel-image-container-2 product-SLA">
<i class="image-carrousel-2"></i>
</div>
<div class="carrousel-image-container-3 product-test-management">
<i class="image-carrousel-3"></i>
</div>
<div class="col-custom-5">
<div class="col-custom-7 text-size-xl">
<div class="text-container-17">
<div class="product product-release-management">
<span class="text-color-6 text-weight-thin">Rivet</span> <br>
<span class="text-color-5 text-weight-bold">Release Management</span> <br>
<span class="text-color-3 text-weight-bold">plugin</span>
</div>
<div class="product product-SLA">
<span class="text-color-6 text-weight-thin">Rivet</span> <br>
<span class="text-color-5 text-weight-bold">SLA</span> <br>
<span class="text-color-3 text-weight-bold">plugin</span>
</div>
<div class="product product-test-management">
<span class="text-color-6 text-weight-thin">Rivet</span> <br>
<span class="text-color-5 text-weight-bold">Test Management</span> <br>
<span class="text-color-3 text-weight-bold">plugin</span>
</div>
</div>
<div id="carrousel-dots-contener" class="carrousel-dots text-color-5">
<div class="dot-container" data-carrousel-dot='dot-1'>
<div class="dot-border">
<div class="dot dot-custom-2">●</div>
</div>
</div>
<!--
-->
<div class="dot-container" data-carrousel-dot='dot-2'>
<div class="dot-border">
<div class="dot dot-custom-2">●</div>
</div>
</div>
<!--
-->
<div class="dot-container" data-carrousel-dot='dot-3'>
<div class="dot-border">
<div class="dot dot-custom-2">●</div>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
这些是主要问题：
当您确定不需要中断动画时，promise()调用正常，但只要您有需要立即操作的鼠标事件（例如 hideAll ），这个承诺将成为一个问题：它仍然会解决，但在一个不方便的时刻。实际上，只要您执行其他动画（例如 hideAll ），就要取消执行已解析的承诺之后的代码。所以......在继续fadeIn()之前添加一个条件，看看产品选择是否仍然相关。
runInterval 立即调用 cyclicChange ，这在页面加载时很好，但是当鼠标移动到一个点到下一个点时有点烦人：当鼠标可能退出该区域时，会调用 runInterval 并使选择跳转到可能是另一个点，这使得它有点跳跃。最好立即删除 cyclicChange ，然后在 start 运行时添加一些代码以显示第一个产品。
为避免不必要的动画排队，您可以在stop(true)之前致电fadeOut()。
我将这些更改应用到您的JavaScript代码中，我还做了一些其他改进，与问题无关：
var carrousel = (function() {
var interval = null,
products,
current = -1;
products = [
'.product-release-management',
'.product-SLA',
'.product-test-management'
];
function showProduct(id) {
// Avoid unnecessary work
if (id == current) return; // nothing to do;
// In other cases: hide first
hideAll();
current = id;
$('.product').promise().done(function() {
// Make sure selection is still like at the start of showProduct execution
if (current === id) $(products[current]).fadeIn(500);
});
$("div[data-carrousel-dot='dot-" + (current + 1) + "']").addClass('dot-active');
}
function hideAll() {
// 1. easier selector for selecting all product classes
// 2. stop any ongoing animation
$(products.join(",")).stop(true, true).fadeOut(500);
$("div[data-carrousel-dot").removeClass('dot-active');
}
function cyclicChange() {
if ( isNaN(interval) ) return; // timer is not active
showProduct((current + 1) % products.length); // easier way to roundtrip
}
function runInterval(){
interval = setInterval(cyclicChange, 3000);
}
function mouseOverDotHandler() {
$('.dot-container').hover(
function() {
// Easier way to get number
showProduct($(this).index());
}
);
$('#carrousel-dots-contener').hover(
function(){
clearInterval(interval);
interval = null; // use variable for indicating the pause
},
runInterval
);
}
return {
start: function() {
showProduct(0);
runInterval();
mouseOverDotHandler();
}
}
})();
$(document).ready(function(){
carrousel.start();
});
在jsbin.com上看到它。