Je veux le spectacle div quand vol stationnaire de la souris sur un autre, et disppear automatique après quelques secondes avec jquery

Question

premier ici est mon code html:

<div class="outter"> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
</div> 
<div class="inner"></div> 

quand ma souris sur le « point », le spectacle « intérieur » , lorsque la mouseOut "intérieure" disppeared:

$(".item").hover(function(){ 
    // setTimeout(function(){$('.inner').hide('slow');},2000); 
    $('.inner').show('slow'); 
},function(){ 
    $('.inner').stop(true, true).hide('slow'); 
}) 

ainsi que je veux quand "intérieur" a montré, il disppear automatique après quelques secondes

donc j'écrire setTimeout (function() {$ ('.inner'). hide ('lent');}, 2000); comme la note dans le code ci-dessus

mais n'est pas bon avant-corps, here is the online case il cann't remis à zéro le « setTimeout » lorsque la souris sur un autre « élément », alors comment puis-je résoudre le problème?

Merci!

Answer 1

Essayez de mettre clearTimeout (mytime); comme la première ligne de la deuxième fonction de votre .hover.

$(".item").hover(function(){ 
    myTime = setTimeout(function(){$('.inner').hide('slow');},2000); 
    $('.inner').show('slow'); 
},function(){ 
    clearTimeout(myTime); 
    $('.inner').stop(true, true).hide('slow'); 
}) 

Ce code n'a pas été testé mais devrait vous envoyer dans le bon sens ... j'espère.

Answer 2

Essayez ceci:

$(".item").hover(function() { 
$('.inner').show('slow');}, 
function() {var timer = setTimeout(function() { 
clearTimeout(timer); 
$('.inner').stop(true, true).hide('slow'); 
}, 2000); 
}); 

modifié pour corriger une erreur de ma part ... http://jsfiddle.net/3p4MU/10/