Comunidad de diseño web y desarrollo en internet online

Tarda unos segundos en empezar un animate

Citar            
MensajeEscrito el 27 Sep 2013 10:46 pm
A ver si me podéis ayudar.

El script que he hecho es para cambiar el tamaño de un elemento de forma animada al hacer un scroll en la página.

Cuando hago scroll hacia abajo, la animación se hace automáticamente, pero al volver al top de la página, la animación tarda unos 5 segundos en empezar, y no consigo averiguar porqué. Lo que me parece más raro es que si en lugar de animate pongo slideDown / slideUp no hay que esperar para ninguno de los dos, lo hace automáticamente.

¿Qué puede estar pasando?

Este es el código del documento html completo...

Código HTML :

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>scrolling</title>

   <style>
      header {
         width: 100%;
         height: 126px;
         position: fixed;
         background: #eee;
         }

      p {
         height: 2000px;
         }
   </style>
</head>

<body>
   <header></header>
   <p></p>


   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
   <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>

   <script>
      $(window).scroll(function(event) {

        var scrollingTop = $(window).scrollTop();
          
        if (scrollingTop > 10) {
           $('header').animate ( { height: '27px' } );
        };

        if (scrollingTop == 0) {
           $('header').animate ( { height: '126px' } );
        };

      });
   </script>

</body>
</html>

Por walden

Claber

120 de clabLevel



 

safari
Citar            
MensajeEscrito el 30 Sep 2013 11:46 pm
Hola walden, bueno lo que esta pasando es que al momento de cada scroll estas ejecutando un condicionamiendo, si das 2, 3, 4, 5, 6 scroll estas mandando múltiples funciones y por eso tarda en volver el div a su estado normal al momento de tener el scroll en 0, para resolver este problema solo vuelve a condicionar, que te quede de esta forma el código javascript:

Código Javascript :

  $(window).scroll(function() {

        var scrollingTop = $(window).scrollTop();
        $('header').html(scrollingTop);
 
 
      
      if (scrollingTop > 10) {
         if($('header').height() == 126){
           $('header').animate ( { height: '27px' } );} else{}
        };

        if (scrollingTop == 0) {
         if($('header').height() == 27){
           $('header').animate ( { height: '126px' } );} else{}
        };
      
      });


Te recomiendo mucho que siempre mandes

Código Javascript :

alert(); o console.log(); 
para que te descuenta cuantas veces se ejecutan un código o envíes variables etc.

Saludos!

Por alejandroC

34 de clabLevel



 

firefox
Citar            
MensajeEscrito el 30 Sep 2013 11:48 pm
Elimina la linea de código que dice:

Código Javascript :

$('header').html(scrollingTop);

Solamente sirve para ver el $(window).scrollTop();

Saludos!

Por alejandroC

34 de clabLevel



 

firefox
Citar            
MensajeEscrito el 01 Oct 2013 10:54 am
Gracias!!!

¿El 'else {}' vacío, es para hacer lo que comentas de volver a condicionar?

Por walden

Claber

120 de clabLevel



 

safari
Citar            
MensajeEscrito el 01 Oct 2013 07:20 pm
Al momento de hacer un scroll estas ejecutando una función, en la cual en la variable scrollingTop guardas el top de la ventana o window y estas condicionando por cada ves que se haga un scroll, ahora imaginate que el usuario mueva el scroll hasta el pie de pagina se habrán ejecutado múltiples funciones y al momento de volver al top la animación tarda debido a que todavía se siguen ejecutando esas múltiples animaciones, por eso te comente que en cada función se condicione el tamaño de la ventana para filtrar tantas funciones múltiples que se envían ;)

El else vacío lo puede ignorar o borrar simplemente yo tengo la costumbre de colocarlo en cada condición.

Saludos!

Por alejandroC

34 de clabLevel



 

firefox
Citar            
MensajeEscrito el 01 Oct 2013 10:06 pm
Gracias por la aclaración...

Por walden

Claber

120 de clabLevel



 

safari

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.