2012-08-05 20 views
11

Eventuali duplicati:
Jquery delay execution of scriptRitardo Rimozione di una classe in Jquery

sto scrivendo un piccolo script che, quando la pagina viene caricata, assegna una sottoclasse CSS a tre elementi. 800 ms dopo, voglio che rimuova quella sottoclasse.

Ho pensato che questo codice potrebbe farlo:

<script type="text/javascript"> 
$(document).ready(function() { 


     $("#rowone.one").addClass("pageLoad"); 
     $("#rowtwo.three").addClass("pageLoad"); 
     $("#rowthree.two").addClass("pageLoad"); 

     .delay(800);  
     $("#rowone.one").removeClass("pageLoad"); 
     $("#rowtwo.three").removeClass("pageLoad"); 
     $("#rowthree.two").removeClass("pageLoad"); 

}) 
</script> 

Purtroppo non, tutto l'aiuto sarebbe molto apprezzato. Grazie in anticipo.

risposta

33

È possibile utilizzare setTimeout() funzione:

chiama una funzione o esegue un frammento di codice dopo il ritardo specificato.

$(document).ready(function() { 
    var $rows = $("#rowone.one, #rowtwo.three, #rowthree.two").addClass("pageLoad"); 

    setTimeout(function() { 
     $rows.removeClass("pageLoad"); 
    }, 800); 
}); 
2

Usa setTimeout per questo.

setTimeout(function() { 
$("#rowone.one").removeClass("pageLoad"); 
$("#rowtwo.three").removeClass("pageLoad"); 
$("#rowthree.two").removeClass("pageLoad"); 
}, 800); 
12

provare questo: anche io non sono sicuro perché nessuno sopra espressione incatenato usato potrebbe essere ho perso qualcosa

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

spero che misura il vostro bisogno :)

Codice

$("#rowone.one, #rowtwo.three, #rowthree.two").addClass("pageLoad"); 

setTimeout(function() {  
     $("#rowone.one, #rowtwo.three, #rowthree.two").removeClass("pageLoad");   
}, 800); 
+1

+1 Per minifying il codice ':)' anche come ID sono nomi di classi uniche possono essere rimossi. – undefined

+0

@Raminson Saweet as bruv! howz life! Stavo per dosare, spero che tu abbia preso a calci! Grazie ':)' –

1

avvolgerla in una funzione e passare allo stato , in questo modo:

$(document).ready(function() { 
    doClasses('add'); 
    setTimeout(function() { doClasses('remove'); }, 800) 

    function doClasses(state) { 
     $("#rowone.one, #rowtwo.three, #rowthree.two")[state+'Class']("pageLoad"); 
    } 
}); 

FIDDLE

Ora è facile da chiamare, e più facile da mettere in un timeout, e non si sta ripetendo il codice.

0

ho rimosso il: selettori di classe .one .three . two e ha aggiunto la funzione di timeout. dovrebbe funzionare.

<head> 
<style type="text/css"> 
.pageLoad{color:red;} 
</style> 


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
</head> 



<body> 
<div id="rowone">rowone</div> 
<div id="rowtwo">rowtwo</div> 
<div id="rowthree">rowthree</div> 



<script type="text/javascript"> 
$(document).ready(function() { 


     $("#rowone").addClass("pageLoad"); 
     $("#rowtwo").addClass("pageLoad"); 
     $("#rowthree").addClass("pageLoad"); 




}) 

function removeC(){ 
$("#rowone").removeClass("pageLoad"); 
     $("#rowtwo").removeClass("pageLoad"); 
     $("#rowthree").removeClass("pageLoad"); 
} 

setInterval(removeC, 5000); 


</script> 
</body> 

+1

Non voglio downvote visto che sei nuovo, ma le altre risposte sembrano già per coprire la domanda. Inoltre, stai facendo delle ipotesi sull'HT HTML dell'OP. – PPvG

Problemi correlati