동적으로 시간 제한을 설정하십시오.

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>