Foros del Web - Ver Mensaje Individual

Djoaq · #3 (**permalink**) 07/08/2014, 06:36

Cita:

Iniciado por kalvinman

Hola amigos, verán quiero agregarle algo de dinamismo a una presentación web, entonces me gustaria que al entrar se animaran varios objetos usando jquery y de ser posible la librería de css que estoy usando animate.css el punto es que necesito que se anime como una linea de tiempo, es decir primero una animación, luego otra, luego otra y así, entonces como podría hacerlo con jquery?

Hola te recomiendo que le eches un vistazo a JQUERY UI tiene algunos efectos que te pueden interesar.

http://jqueryui.com/show/

Hay que tener en cuenta que hay 2 opciones :

El metodo effect() ; que sirve para desecandenar el efecto cuando hay una interacción del user ..
onclick , onmouseenter onkeyp .. etc.. :

Código HTML:

Ver original<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Prueba de Animaciones</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
  <script>

Código Javascript:

Ver original$(document).ready(function(){
    $( "#boton" ).click(function() {
      $('.contenedor').effect('bounce','slow'); //el primer parameto le pasamos el efecto deseado , el segundo parametro le pasamos la duracion , tambien acepta un entero por ejemplo 220;
    });
 
     $( "#boton" ).click(function() {
      $('.contenedor').effect('bounce','slow',function(){//te en cuenta que podemos introducir callbacks para ejecutar otras acciones como por ejemplo añadirle otro efecto etc..o seleccionar otro elemento y animarle al finalizar este.
        alert("prueba!");
      }); 
    });
  });

Código HTML:

Ver original</script>
</head>
<body>
<button id="boton">effecto</button>
<div class="contenedor">
  <div id="effect">
    <h3>Effect</h3>
    <p>
      Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
    </p>
  </div>
</div>
</body>
</html>

En tu caso lo que quieres hacer es que los elementos que quieras aparezcan al cargar la pagina , por lo tanto debes esconderlos y luego mostrarlos ejemplos :

Código HTML:

Ver original<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Prueba de Animaciones</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
  <script>

Código Javascript:

Ver original$(document).ready(function(){
   
    $('.contenedor').hide();
      $('.contenedor').show('scale',220); //mismo funcionamiento primero hacemos hide para al cargar la pagina el elemento no aparezca y despues lo hacemos aparecer con un efecto scale y 220 ms de duración.
  });

Código HTML:

Ver original</script>
</head>
<body>
<div class="contenedor">
  <div id="effect">
    <h3>Effect</h3>
    <p>
      Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
    </p>
  </div>
</div>
</body>
</html>

Para hacer lo que quieres , te recomiendo no tirar mucho de callbacks , dentro de callbacks ...
Para ello te recomiendo recorrer el DOM mediante each ( vendría a ser un for que retorna los elementos encontrados mediante el selector indicado ).
Para ello puedes hacer algo como :

Código Javascript:

Ver original$('.div_clase').each(function(i) { //each busca cada uno de los elementos 
    $(this).children().delay(800*i).fadeOut('fast', function() { //children hace referencia  a los elementos hijos del selector $('.div_clase'),  this hace referencia al selector sobre el que hemos desencadenado el evento $('.div_clase') , delay retarda el efecto y multiplicamos la duración por i (indice de vuelta de each por el tiempo de retraso entre efecto y efecto) 
        $(this).fadeIn('slow');
    });
});

Espero haberte ayudado !
Un saludo!