2011-02-10 13 views
13

cosa sto facendo wroing qui?addclass ritardato/funzione di classe non funzionante

$(function() { 
$('ul li:nth-child(1)').addClass("go").delay(4500).removeClass("go"); 
$('ul li:nth-child(2)').addClass("go").delay(1500).removeClass("go"); 
$('ul li:nth-child(3)').addClass("go").delay(500).removeClass("go"); 
$('ul li:nth-child(4)').addClass("go").delay(4500).removeClass("go"); 
$('ul li:nth-child(5)').addClass("go").delay(1000).removeClass("go"); 
}); 
+0

Piccola spiegazione sarebbe a portata di mano. Suppongo che tu stia cercando di cambiare la classe di un elenco in un ordine specifico impostandolo dopo un diverso ritardo per ciascun elemento. Che bit non funziona? – Spacedman

+0

.delay() solo ritardi animazioni, non funzioni –

risposta

16

.delay() è progettato solo per funzionare con le animazioni. Dovrete ricorrere all'utilizzo setTimeouts regolari per quello che stai facendo:

var li = $('ul li:nth-child(1)').addClass('go'); 
setTimeout(function() { 
    li.removeClass('go'); 
}, 4500); 

Per effettuare questa operazione ad ogni <li> un po 'più piacevole, è possibile refactoring del codice in questo modo:

$(function() { 
    var delays = [4500, 1500, 500, 4500, 1000]; 
    $('ul li').addClass('go').each(function (i) { 
     setTimeout(function (li) { 
      li.removeClass('go'); 
     }, delays[i], $(this)); 
    }); 
}); 
+0

Sto creando un'animazione in cui visualizzerò un gruppo di elementi di elenco: nessuno; Devo quindi aggiungere una classe a ciascun elemento della lista, uno alla volta, per un intervallo di tempo predeterminato, solo dopo che il tempo è trascorso la classe è stata rimossa e aggiunta alla successiva voce dell'elenco. A quel punto la stessa classe verrà aggiunta alla successiva voce dell'elenco per una quantità completamente diversa di tempo predeterminato. per un s –

+0

@Bizarro, funziona qui: http://jsfiddle.net/eXJQB/. –

+0

thx, funziona un po '... se guardi vedi che tutte le classi sono applicate nello stesso istante (diventano tutte blu alla stessa ora) poi svaniscono a intervalli diversi. Ho bisogno che la classe venga applicata a un solo elemento dell'elenco, una volta trascorso il tempo, ALLORA si applica alla voce successiva dell'elenco –

39

Giusto per aggiungere, è possibile utilizzare un .queue:

$('ul li:nth-child(1)').addClass("go") 
         .delay(4500) 
         .queue(function() { 
          $(this).removeClass("go"); 
          $(this).dequeue(); 
         }); 
+1

Ah Ho dimenticato questo +1. Non dimenticare di '.dequeue()' o 'next()' però! –

+1

@ Box9 - Buon punto. Ho gettato in '.dequeue()'. – karim79

+1

Ancora lo stesso problema: le classi vengono aggiunte alle voci della lista contemporaneamente ... poi vengono rimosse in momenti diversi. Controlla: http://jsfiddle.net/bM6uY/8/ –