動態設置超時時間

Question

如何清理幾個懸停元素的超時？

我的代碼如下：

$(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); 
} 

問候

Answer 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>