delay no funciona

[kenproxd]

Hola,

Estoy intentando agregarle una clase a todos los divs que tengan la clase .conocimiento pero quiero que se agreguen una por una pero se agregan todas al mismo tiempo, mi código es el siguiente:

Código HTML:

<div class="html-5 conocimiento">
    <div class="conoc-cont">
      //
  </div>
  <div class="css-3 conocimiento">
    //
  </div>
  <div class="ps conocimiento">
    //
  </div>
  <div class="js conocimiento">
   //
  </div>
  <div class="php conocimiento">
    //
  </div>
 

Código Javascript:

$('.conocimiento').each(function(index) {
 $(this).delay(500*index).addClass('animated shake');
});
 

Alguna idea de por qué no funciona?

[hechicerd0]

Mira que index esté dando un numero que sea mayor que 0 y mira a través de la herramienta de desarrollo del explorador si realmente sale algún error o no (F12).

[kenproxd]

Muchas gracias por tu respuesta, estos son los valores que obtengo:

functions.js:86 0
functions.js:86 500
functions.js:86 1000
functions.js:86 1500
functions.js:86 2000

y no me da ningún error, sin embargo todos aparecen al mismo tiempo :(

[hechicerd0]

Prueba con:

Código Javascript:

setTimeout(
  function() 
  {
   $(this).addClass('animated shake');
  }, 500*index);
 

[kenproxd]

A pesar de que lo modifiqué de la siguiente manera me dice que indexno esta definido:

Código Javascript:

setTimeout(
  function(index) 
  {
   $('.conocimiento').addClass('animated shake');
  }, 500*index);
 

había intentado de una manera similar que sí agrega el estilo pero de igual manera los pone todos al mismo tiempo:

Código Java:

var tiempo = 0;
        $('.conocimiento').each(function(){
            setTimeout(function() {$('.conocimiento').addClass('animated shake');} , tiempo)
            tiempo += 500;
            console.log(tiempo);
        });
 

Imprime los siguientes valores:

500
functions.js:83 1000
functions.js:83 1500
functions.js:83 2000
functions.js:83 2500

[siddartha23]

Tienes que usar la función setInterval()

[sintel_1]

Hola.

En principio tienes un error en el dom, has metido un div
<div class="conoc-cont"> sin cierre, ahi js se hace un lio.

prueba a corregir eso y pones la funcion jquery asi:

$('.conocimiento').each(function(i){
var capas = $(this);
setTimeout(function() { capas.addClass('animated shake'); }, 500*i);
});