jQuery fadeIn () intervalos múltiples div

Sigo las indicaciones de la publicación: jQuery fadeIn () diferentes intervalos con múltiples div

pero simplemente no puedo hacer que funcione ... lo que está mal

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>


<script type="text/javascript">
$('.fadeIn').each(function(){
        var $this = $(this);
        $this.before('<div>&nbsp;</div>');
        setTimeout(function(){ 
            $this.prev().remove(); 
            $this.fadeIn(Math.floor(Math.random()*1500)); 
        }, Math.floor(Math.random()*1500));
    }
);​

</script>       

<style>

.fadeIn{
   display: none; 
}​
​
</style>

</head>



<body>

<div class="fadeIn">Test 1</div>
<div class="fadeIn">Test 2</div>
<div class="fadeIn">Test 3</div>
<div class="fadeIn">Test 4</div>
<div class="fadeIn">Test 5</div>
<div class="fadeIn">Test 6</div>​
</body>
</html>

preguntado el 22 de mayo de 12 a las 11:05

Debe incluir la biblioteca jQuery -

Y necesita envolver su código en un $(function() { }) declaración para asegurarse de que el DOM esté listo antes de que se ejecute -

4 Respuestas

demostración en acción

¡Tienes que importar la biblioteca jQuery!
Añádelo antes de tu <script>:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

debería verse así:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>    
<script type="text/javascript">

(function($){ // remap the '$' character to jQuery

$('.fadeIn').each(function(){
        var $this = $(this);
        $this.before('<div>&nbsp;</div>');
        setTimeout(function(){ 
            $this.prev().remove(); 
            $this.fadeIn(Math.floor(Math.random()*1500)); 
        }, Math.floor(Math.random()*1500));
)};

})(jQuery);


</script>  

O usa el $(document).ready(function(){ /*your code here*/ }); !

contestado el 22 de mayo de 12 a las 12:05

se deshizo del mensaje de error, pero aún ahora se desvanece en el texto: nadie

@ThomasBLund simplemente descargue este ejemplo (haga clic en GUARDAR -> botón de descarga) jsbin.com/adefez/edit#javascript,html,live Y echa un vistazo. - Roko C. Bulján

1) Debe incluir la biblioteca jquery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

2) Debe envolver su código en un $(function() or jQuery(function($)

jQuery(function($) {
    $('.fadeIn').each(function(){
            var $this = $(this);
            $this.before('<div>&nbsp;</div>');
            setTimeout(function(){ 
                $this.prev().remove(); 
                $this.fadeIn(Math.floor(Math.random()*1500)); 
            }, Math.floor(Math.random()*1500));
        }
    );​
});

contestado el 22 de mayo de 12 a las 11:05

or jQuery(function($) { asegurarse $ representa jQuery. - Andreas Luv

Necesitas hacer la actualización de tu código:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
    $('.fadeIn').each(function () {
        var $this = $(this);
        $this.before('<div>&nbsp;</div>');
        setTimeout(function () {
            $this.prev().remove();
            $this.fadeIn(Math.floor(Math.random() * 1500));
        }, Math.floor(Math.random() * 1500));
    });​
})
</script>  

La

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

agrega la biblioteca jQuery a su página; esto le permite usar las funciones jQuery. Y necesita envolver su código en el

$(function() {

});

bloque para que no se ejecute hasta que el DOM esté listo... Vea los documentos aquí

contestado el 22 de mayo de 12 a las 11:05

gracias, como puede ver, soy realmente nuevo en esto, así que actualicé el código pero aún no tengo cigarro.ajax.googleapis.com/ajax/libs/jquery/1/…> $(function () { $('.fadeIn').each(function () { var $this = $(this); $this.before(' '); setTimeout(function () { $this.prev().remove(); $this.fadeIn(Math.floor(Math.random() * 1500)); }, Math.floor(Math.random() * 1500)); });​ }) - nadie

necesita cerrar la etiqueta del script de esta manera: <script src="jquery.....js"></script> si tienes, ¿qué errores estás recibiendo? - Casa del pastor

¿Puedes agregar tu HTML a la pregunta? tal vez un problema allí? - Casa del pastor

Prueba 1 prueba 2 Prueba 3 prueba 4 Prueba 5 Prueba 6​ - nadie

parece que el JS no es capaz de capturar e invadir el css .fadeIn{ display: none; }​​ - nadie

Primero aquí es el violín con su código funcionando.

Todo lo que no hizo fue importar la biblioteca jquery en su elemento principal.

contestado el 22 de mayo de 12 a las 11:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.