如何清除多个悬停元素的超时?
我的代码如下:
$(document).ready(function(){
$(".imagenesC").hover(imagenesCEntrada,imagenesCSalida);
});
var timeouts = {};
function imagenesCEntrada(){
var id=$(this).attr("id");
clearTimeout(timeouts['cuadricula'][id]);
$("#"+id).stop(true).animate({"opacity":"0"},1000);
}
function imagenesCSalida(){
var id=$(this).attr("id");
timeouts['cuadricula'][id] = setTimeout(function(){
$("#"+id).stop(true).animate({"opacity":"1"},1000);
}, 100);
}
问候语
答案 0 :(得分:1)
您似乎拥有相同类的多个元素,您可以使用它们的索引来创建动态的计时器数组。
请参阅工作代码段。
var timer = [];
$('.label').mouseenter(function(){
clearTimeout(timer[$(this).index()]);
console.log("Mouse enter");
$('#' + this.id + ' div').slideDown('slow');
});
$('.label').mouseleave(function(){
var temp = $('#' + this.id + ' div');
timer[$(this).index()] = setTimeout(function() {
console.log("Mouse leave");
temp.stop().slideUp('slow');
}, 2000);
});
$(document).ready(function(){
$(".imagenesC").hover(imagenesCEntrada,imagenesCSalida);
});
var timeouts = [];
function imagenesCEntrada(){
var id=$(this).attr("id");
clearTimeout(timeouts[$(this).index()]);
console.log("clear");
$("#"+id).stop(true).animate({"opacity":"0"},1000);
}
function imagenesCSalida(){
var id=$(this).attr("id");
console.log("enter");
timeouts[$(this).index()] = setTimeout(function(){
$("#"+id).stop(true).animate({"opacity":"1"},1000);
}, 100);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="label" id="dummyId1">Demo1</div>
<div class="label" id="dummyId2">Demo2</div>
<div class="label" id="dummyId3">Demo3</div>
<div class="label" id="dummyId4">Demo4</div>
<div class="imagenesC" id="imagenesC1">imagenesC1</div>
<div class="imagenesC" id="imagenesC2">imagenesC2</div>
<div class="imagenesC" id="imagenesC3">imagenesC3</div>
<div class="imagenesC" id="imagenesC4">imagenesC4</div>
&#13;