2012-08-05 12 views
11

Duplicar posibles:
Jquery delay execution of scriptretardo Eliminación de una clase en Jquery

Estoy escribiendo un pequeño script que, cuando se carga la página, asigna una subclase CSS a tres elementos. 800 ms más tarde, quiero que elimine esa subclase.

pensé que este código podría hacerlo:

<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> 

Lamentablemente no es así, cualquier ayuda sería muy apreciada. Gracias por adelantado.

Respuesta

33

Puede utilizar setTimeout() función:

llama a una función o ejecuta un fragmento de código después del retardo especificado.

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

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

Uso setTimeout para esto.

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

probar esto: también no estoy seguro de por qué nadie por encima de la expresión utilizada encadenado podrían me haya perdido algo

.delay() solamente está diseñado para trabajar con animaciones. Vas a tener que recurrir al uso de setTimeouts regulares de lo que está haciendo:

espero que se adapte a su necesidad :)

Código

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

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

+1 Para minifying el código ':)' También como identificadores son nombres de clases únicas se pueden eliminar. – undefined

+0

@Raminson Saweet como bruv! Howz vida! ¡Estaba a punto de desvanecerme, espero que patales duro! Gracias ':)' –

1

lo envuelve en una función y pasar al estado , así:

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

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

FIDDLE

Ahora es fácil llamar, y es más fácil poner un timeOut, y no está repitiendo el código.

0

Quité los selectores de clase .one .three . two y agregué la función de tiempo de espera. Deberia trabajar.

<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

No declinaré ya que eres nuevo, pero las otras respuestas ya parecen cubrir la pregunta. Además de eso, estás haciendo suposiciones sobre el HTML del OP. – PPvG

Cuestiones relacionadas