動的にタイムアウトを設定する

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>