2013-07-31 31 views
6

Ho un menu a fisarmonica personalizzato. Per visualizzare le opzioni di secondo livello nel menu, ho scelto di utilizzare slideToggle(). Per qualche ragione, c'è un ritardo tra quando cliccano e quando si verifica l'animazione.ritardata jQuery slideToggle animazione

enter image description here

Ciò è evidente se visto in contrasto con un altro menu a fisarmonica sulla stessa pagina ... ho scoperto che la funzione che è destinato (al clic) alla voce di menu viene eseguito quasi immediatamente. Il problema è che l'animazione slideToggle sembra iniziare più tardi del dovuto.

Credo che questo potrebbe accadere a causa del modo in cui sto prendendo di mira l'elemento che è stato chiamato slideToggle().

  var $expandableMenu = $(".expandable .level1"); 

      $expandableMenu.bind('click', function() { 

       $(this).next().slideToggle(200, function() { 
        $(this).parent().toggleClass("opened"); 
       }); 

      }); 

Forse il problema è che $(this).next() è un modo lento per indirizzare l'elemento che ho bisogno di usare slideToggle() su?

Quali sono i tuoi pensieri?

Modifica: Ho effettuato un test case jsFiddle ... Stranamente il problema non si verifica qui. http://jsfiddle.net/nYZNP Stai ancora cercando il problema.

+6

+1 solo per l'animazione! Questo è un ottimo modo per illustrare il problema. –

+0

Ti dispiacerebbe postare un [jsfiddle] (http://jsfiddle.net) in modo che possiamo testare meglio il tuo problema? Inoltre, il markup pertinente sarebbe utile pure. Grazie! –

+0

jsFiddle replica del markup e jQuery: http://jsfiddle.net/nYZNP/ Stranamente, il problema non si verifica nel violino .... hmm .. –

risposta

0
  $(this).next().slideToggle(200, "linear", function() { 
       $(this).parent().toggleClass("opened"); 
      }); 

Hai provato a utilizzare una diversa opzione di andamento?

anche se si verifica questo su un dispositivo mobile, il ritardo può essere parte di come i dispositivi mobili maniglia clicca eventi che possono avere un ritardo intrinseco di 50 ms o più.

1

Se si sta provando questo su un dispositivo mobile, potrebbe essere necessario più tempo per l'animazione per iniziare, come il dispositivo è in attesa (anche 200 ms +) per assicurarsi che non si sta tentando un doppio tocco. Se questo è il caso si potrebbe andare per le biblioteche come zepto.js, che ha un evento di rubinetto o fastclick.js che emula eventi rubinetto.

in termini di prestazioni selettore, $(this).parent() dovrebbe andare bene. In questo caso, tuttavia, si potrebbe eliminare alcuni millisecondi non scrittura e lettura della variabile prima, in questo modo:

 $(".expandable .level1").bind('click', function() { 

      $(this).next().slideToggle(200, function() { 
       $(this).parent().toggleClass("opened"); 
      }); 
     }); 

Inoltre, "A partire jQuery 1.7, il metodo .on() è il metodo preferito per il fissaggio gestori di eventi di un documento. " (jQuery api). O in altre parole, bind() è deprecato!

E infine c'è la regola generale che il filtraggio da nome del tag è più veloce che con nome di classe o id, così $("li.expandable .level1") dovrebbe essere più veloce di $(".expandable .level1").

Forse si può anche essere più preciso circa le esatte circostanze, come ad esempio il browser/dispositivo o qualsiasi altra differenza per il vostro violino?

+0

Alternate Fastclick pronti contro termine è da "dave1010" di GitHub, che preferisco. È possibile visualizzare la differenza tra normale e fastclick (se presente) in modo interattivo qui: http://3oheme.com/blog/2013/08/10/apply-fast-click-for-ios-to-your-website.html –