JQuery: problemi di temporizzazione Fadein / Fadeout

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

  •  29-10-2019
  •  | 
  •  

Domanda

In un sito che sto gestendo, ho questo collegamento in stile che sul clic si attenua in un elenco di rilascio sotto di esso, in modo che l'utente possa selezionare un genere.

Ho la dissolvenza nel lavorare perfettamente, il problema che sto in esecuzione sta cercando di determinare se l'elenco a discesa è stato in bilico in modo che io possa nasconderlo se l'utente si libra il collegamento in stile senza inserire la cadutaGiù Elenco.

Allora, l'elenco a discesa svanisce, l'utente non inserisce l'elemento a discesa, quindi l'elemento si attenua, tuttavia, se l'utente entra nell'elemento a discesa (mentre si lascia il collegamento filettato che attiva il fadein)Quindi il menu a discesa dovrebbe rimanere mostrato fino a lasciare l'elemento a discesa.

Ecco il codice che ho finora: 

$('#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)
        }
    })
})
.

È stato utile?

Soluzione

La struttura è molto problematica.Perché aggiungi ascoltatori al mouse?

La cosa migliore che potresti fare è

    .
  • Imposta la fadein per comparire su Mouseenter
  • Set Fadeout su Mouseleave con un ritardo di ~ 300-400ms utilizzando Settentimeout ()
  • Imposta il menu a discesa effettiva per svanire in on on morerenter, utilizzando una fermata prima di questo (ad esempio: STOP (TRUE, TRUE) .Fadein (200), ma utilizzare ClearTimeout () prima che ciò accada all'interno del gestore di eventi. Imposta il dislungamento effettivo per svanire su Mouseleave

    In realtà dovresti usare un arresto (vero, vero) prima di tutte queste animazioni.

    La logica dietro questo è che se l'utente aleggia sull'estensione, il menu a discesa proverà a svanire in modo così cancellando il fadeout che viene accodato per accadere (hai aggiunto un timer extra 200-300sec).

    Un altro modo per farlo, è nidificare il menu a discesa all'interno del tag genitore, quindi mentre sei in bilico all'interno del menu a discesa, non svanirà comunque (questo funziona anche con PURE CSS)

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top