JQUERY: Problèmes de synchronisation de Fadein / Fadeout

StackOverflow https://stackoverflow.com/questions/8418012

  •  29-10-2019
  •  | 
  •  

Question

Dans un site que je gère, j'ai ce lien de style qui, en clic, s'estompe dans une liste de département en dessous, afin que l'utilisateur puisse sélectionner un genre.

J'ai le fondu pour fonctionner parfaitement, le problème que je rencontre est d'essayer de déterminer si la liste déroulante a été survie ou non sur la planche afin que je puisse le masquer si l'utilisateur s'écarte du lien stylé sans entrer dans la liste déroulante.

Ainsi, la liste déroulante s'estompe, l'utilisateur n'entre pas l'élément baissé, puis l'élément s'estompe, cependant, si l'utilisateur entre l'élément baissé (tout en laissant le lien cliqué qui déclenche le fondu) puis la goutte Le bas devrait rester illustré jusqu'à quitter l'élément déroulant.

Voici le code que j'ai jusqu'à présent:

$('#categories_link').live('click mouseleave', function(e){
    $('.categories').fadeIn(200, function(){
        $(this).live('mouseenter mouseleave', function(evnt){
            switch(evnt.type) {
                case "mouseenter":
                    $(this).stop(true, true)
                    $(this).data('visible', true)
                break;

                case "mouseleave":
                    $(this).data('visible', false)
                break;
            }
        })

        if(e.type == 'mouseleave') {
            if($('.categories').data('visible'))
                return;
            else
                $('.categories').fadeOut(200)
        }
    })
})
Était-ce utile?

La solution

La structure est très problématique. Pourquoi ajoutez-vous des auditeurs en congé de souris?

La meilleure chose que vous puissiez faire est

  • Réglez le fadein pour apparaître sur Mouseenter
  • Réglez Fadeout sur Mouseleave avec un délai de ~ 300 à 400 ms en utilisant setTimeout ()
  • Définissez la liste déroulante réelle pour s'estomper sur MouseEnter, en utilisant un arrêt avant cela (c'est-à-dire: stop (true, true) .fadein (200), mais utilisez ClearTimeout () avant que cela ne se produise à l'intérieur du gestionnaire d'événements.
  • Définissez la liste déroulante réelle sur Fadeout sur Mouseleave

En fait, vous devez utiliser un arrêt (vrai, vrai) avant toutes ces animations.

La logique derrière cela est que si l'utilisateur plane sur la liste déroulante, la liste déroulante essaiera de s'estomper en annulant ainsi le Fadeout qui est en file d'attente (vous avez ajouté un minuteur supplémentaire de 200 à 300 secondes).

Une autre façon de le faire est de nicher la liste déroulante à l'intérieur de la balise parent, donc pendant que vous êtes plané à l'intérieur de la liste déroulante, il ne disparaîtra pas de toute façon (cela fonctionne également avec Pure CSS)

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top