2016-09-22 233 views
0

如何清理幾個懸停元素的超時?動態設置超時時間

我的代碼如下:

$(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

可以嘗試像形成' 'cuadricula' + id'鍵,避免去爲2維數組符號像'[ 'cuadricula'] [ID]'? – vijayP

+0

@Alonso:查看我的答案,瞭解我們如何在數組中應用多個超時。 –

回答

0

看來你已經與同一個類中的多個元素,你可以使用它們的索引創建的動態數組計時器。

請參閱工作片段。

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>

+0

非常感謝你! 這正是我需要的。 你是最棒的! – Alonso

+0

很高興看到這一點,接受將鼓勵他人使用此解決方案的答案:)一切順利。 –