[Résolu] Création d'un effet glitch au survol d'une image

Bonjour,

Je souhaiterais réaliser un effet glitch sur une image(et non un background-image) sur base de ce tutoriel

Le code html:

<a class="post-thumbnail glitch-effect" href="#" rel="bookmark" title="Lee Hardcastle">
   <div class="post-thumbnail">
      <img width="730" height="410" src="screenshot-evil-dead.jpg" alt="Lee Hardcastle">			
   </div><!-- .post-thumbnail -->
</a>

Le css:

.glitch-img div.post-thumbnail{
   position:relative;
   display:block;
   overflow: hidden;
   padding-top: 56.164%;	
}
.glitch-img img{
   position: absolute;
   max-width:100%;
   display:block;
   top: 0;
   left: 0;
   height: 100%;
   border: 0;
}

Voici le code javascript:
Le javascript pour l'hover fonctionne bien. Au survol, la classe glitch-img apparait mais l'effet glitch ne démarre pas.

Comment faudrait-il charger l'effet au survol?
Si je ne met pas de hover, l'effet glitch fonctionne bien.

[
$('.glitch-effect').hover(
	function(){ $(this).addClass('glitch-img') },
	function(){ $(this).removeClass('glitch-img') }
)
//Effet Glitch
$( function() {
	$( ".glitch-img img" ).mgGlitch({
	  // set 'true' to stop the plugin
	  destroy : false, 
	  // set 'false' to stop glitching
	  glitch: true, 
	  // set 'false' to stop scaling
	  scale: true, 
	  // set 'false' to stop glitch blending
	  blend : true, 
	  // select blend mode type
	  blendModeType : 'hue',
	  // set min time for glitch 1 elem
	  glitch1TimeMin : 200, 
	  // set max time for glitch 1 elem
	  glitch1TimeMax : 400,
	  // set min time for glitch 2 elem
	  glitch2TimeMin : 10, 
	  // set max time for glitch 2 elem
	  glitch2TimeMax : 100, 
	});
});

En modifiant le code javascript ci-dessous, j'ai réussi à créer l'effet au hover.
Seulement, le tout s'applique à toutes les images de la liste!?

Apparemment, cela est dû à un problème de propagation mais je ne vois pas comment le traiter. Cela ne marche pas si je met event.preventDefault(); ou event.stopPropagation();

Merci d'avance.

$(".glitch-img").mouseover( function (event) {
	$( ".glitch-img img" ).mgGlitch({
	  // set 'true' to stop the plugin
	  destroy : false, 
	  // set 'false' to stop glitching
	  glitch: true, 
	  // set 'false' to stop scaling
	  scale: true, 
	  // set 'false' to stop glitch blending
	  blend : true, 
	  // select blend mode type
	  blendModeType : 'hue',
	  // set min time for glitch 1 elem
	  glitch1TimeMin : 200, 
	  // set max time for glitch 1 elem
	  glitch1TimeMax : 400,
	  // set min time for glitch 2 elem
	  glitch2TimeMin : 10, 
	  // set max time for glitch 2 elem
	  glitch2TimeMax : 100, 
	});
	event.stopPropagation();	
});

$(".glitch-img").mouseout( function (event) {
	$( ".glitch-img img" ).mgGlitch({
	  // set 'true' to stop the plugin
	  destroy : true, 
	  // set 'false' to stop glitching
	  glitch: false, 
	  // set 'false' to stop scaling
	  scale: false, 
	  // set 'false' to stop glitch blending
	  blend : false, 	 
	});
	event.stopPropagation();
});

Je viens de tester et cela fonctionne parfaitement. Je vais jeter un oeil de plus près à cela pour bien comprendre.
Merci

Le code javascript final:

//Effet Glitch
$(".glitch-img").mouseover( function () {
	$(this).find("img").mgGlitch({
	  // set 'true' to stop the plugin
	  destroy : false, 
	  // set 'false' to stop glitching
	  glitch: true, 
	  // set 'false' to stop scaling
	  scale: true, 
	  // set 'false' to stop glitch blending
	  blend : true, 
	  // select blend mode type
	  blendModeType : 'hue',
	  // set min time for glitch 1 elem
	  glitch1TimeMin : 200, 
	  // set max time for glitch 1 elem
	  glitch1TimeMax : 400,
	  // set min time for glitch 2 elem
	  glitch2TimeMin : 10, 
	  // set max time for glitch 2 elem
	  glitch2TimeMax : 100, 
 
	});

});

$(".glitch-img").mouseout( function () {
	$(this).find("img").mgGlitch(	{
	  // set 'true' to stop the plugin
	  destroy : true, 
	  // set 'false' to stop glitching
	  glitch: false, 
	  // set 'false' to stop scaling
	  scale: false, 
	  // set 'false' to stop glitch blending
	  blend : false, 	 
	});

});

Ok super,

le $(this) permet de cibler l’élément qui est sollicité par l'event $(".glitch-img").mouseover

exemple : si tu survol deux <li> de même class (pas d'ID) mais que tu dois les distinguer pour faire XXX actions sur l'un ou sur l'autre

tu va faire un $(".menu > li").hover(//blablablabal)
et c'est à l'intérieur du hover (dans le blablabla) que $(this) va permettre de cibler l’élément de contexte, l'élément <li> qui à été "hovered" (survolé)
Modifié par JENCAL (24 Sep 2018 - 18:03)