jQuery hover avec setTimeout (à l'opposé de hoverIntent)

Question

J'ai un ensemble d'images que pour chacune j'aimerais rediffuser et scintiller sur une image différente pendant environ une demi-seconde, puis revenir à l'image originale, même si la souris est toujours sur l'image (c'est-à-dire qu'il n'y a pas de souris)

setTimeout a été suggéré mais je n'arrive pas à comprendre comment l'utiliser correctement.

http://thepool.ie/rollover/

Il y a un exemple de la page .... Je voudrais juste l'image qui apparaît sur survolée puis disparaissent à nouveau rapidement. J'ai parcouru le web pour trouver des exemples et je ne trouve rien ... toute aide serait grandement appréciée.

Merci, Andrew

Edit:

C'est le code que je suis actuellement en utilisant des images en vol stationnaire

$(document).ready(function(){ 
$(function() { 
    $('.rollover').hover(function() { 
     var currentImg = $(this).attr('src'); 
     $(this).attr('src', $(this).attr('hover')); 
     $(this).attr('hover', currentImg); 
    }, function() { 
     var currentImg = $(this).attr('src'); 
     $(this).attr('src', $(this).attr('hover')); 
     $(this).attr('hover', currentImg); 
    }); 
}); 

});

Answer 1

L'utilisation de setTimeout est facile. Il prend une fonction comme premier argument - tout comme de nombreuses méthodes jQuery - et le temps en millisecondes comme le second.

J'ai commencé avec votre code et l'ai refactorisé un peu. À l'origine, il y aurait eu un risque de condition de concurrence si l'utilisateur se déplaçait au-dessus, loin de, et revenait sur l'image avant que la minuterie ne se déclenche. Maintenant, la logique pour passer à l'image alternative et revenir à l'original est séparée. Le gestionnaire de survol de la souris court également si les images sont déjà transférées. Je cache également l'objet jQuery renvoyé par $(this), pour une légère amélioration de la vitesse (la mise en cache des objets jQuery est une bonne pratique).

j'ai changé l'attribut hover-data-hover (la spécification HTML5 vous permet d'utiliser des attributs personnalisés, mais exige qu'ils commencent par data-) et vérifié pour son presense dans le sélecteur de mouseover.

Enfin, j'ai retiré l'emballage supplémentaire ready ($(document).ready(function(){…}) et $(function(){…} sont les mêmes, pas besoin d'avoir les deux).

$(function() { 
    $('.rollover[data-hover]').mouseover(function() { 
     var $this = $(this), originalImage = $this.attr('src'); 
     if ($this.data('imagesSwapped')) { 
      return; 
     } 
     $this.attr('src', $this.attr('data-hover')).data('imagesSwapped', true); 
     setTimeout(function(){ 
      $this.attr('src', originalImage).removeData('imagesSwapped'); 
     }, 500); 
    }); 
}); 

Le code n'a pas été testé.

Answer 2

Ici vous trouverez quelques exemples clairs:

http://www.electrictoolbox.com/using-settimeout-javascript/

Mais personnellement, je vous conseille d'utiliser le plug-in Timers, qui est plus simple à utiliser: http://jquery.offput.ca/every/

Answer 3

Quelque chose comme

$('#myid').hover(function() { 
    $(this).addClass('hovered'); 
    setTimeout(function() { $('#myid').removeClass('hovered'); }, 100); 
}); 

Answer 4

Il y a une meilleure façon que SetTimeOut

vous pouvez utiliser $('.rollover').mouseenter(function() { au lieu de $('.rollover').hover(function() {http://api.jquery.com/mouseenter/