Forums Développement Multimédia

Aller au contenu

répétition d'effet non souhaité en jQuery

CODE Ajax JQuery EaseJs

2 réponses à ce sujet

#1 Levendivin

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 302 messages

Posté 08 April 2013 - 10:20 AM

Salut !

J'ai appliqué 2 évènements à un "div" via jQuery : quand on passe la souris avec 'mouseover'sur le "div" en question, le "div" disparait, quand la souris sort de la zone 'mouseout', il réapparait. Tout cela s'anime pas de souci, mais l'effet n'est pas efficace, c'est-à-dire il répète 2 fois, par exemple : j'ai fait une fois 'mouseout', l'effet est exécuté deux fois ou même plus parfois, c'est rare qu'il s'exécute une fois. Comment cela se fait ?

Voici le code :

jQuery.fx.speeds['perso'] = 500;
$('.divimg').mouseover(function(){
$(this).fadeOut('perso');
});

$('.divimg').mouseleave(function(){
$(this).fadeIn('perso');
});
 


#2 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2533 messages

Posté 08 April 2013 - 10:51 AM

Salut,

Voilà ce qu'il se passe :

Lorsque ta souris vient au dessus de l'élément, il disparait progressivement pour l'être totalement.

Dès que tu bouges ta souris, l'évènement mouseLeave est appelé ce qui fait réapparaître la div et donc déclenche immédiatement l'évènement mouseOver ...

Il faut bien comprendre que le fadeIn ne fait pas que modifier l'opacité de l'élément, une fois terminé il lui applique la propriété CSS display : none; il disparait du DOM !

Citation

Once the opacity reaches 0, thedisplay style property is set to none, so the element no longer affects the layout of the page.


Pour faire "disparaître" un élément en css, tu as 2 propriétés : display : none et visibility : hidden

Ce que tu veux faire c'est modifier l'opacité sans supprimer l'élément du DOM

Pour obtenir ça, tu peux utiliser fadeTo qui n'agit que sur l'opacité

$('.divimg').mouseover(function(){
         console.log("over");
         $(this).fadeTo(500,0);
        });
 
        $('.divimg').mouseleave(function(){
         console.log("leave");
         $(this).fadeTo(500,1);
        });
 

edit :
Tu peux aussi utiliser cette notation, peut-être plus claire

$('.divimg').hover(
         function(){
          $(this).fadeTo(500,0);
         },
         function(){
          $(this).fadeTo(500,1);
         }
    );
 

"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#3 Levendivin

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 302 messages

Posté 08 April 2013 - 14:28 PM

Salut dcz.switcher,

J'ai remplacé mon code par les tiens pour essayer, les deux marchent nickel, comme l'effet que je souhaite.

Merci :jesors:



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)