color - jquery delay

¿Cómo se puede detener el enlace hasta después de que se haya completado jQuery.animate?

Question

back story: Estoy diseñando un sitio web de cartera para mí. en su página de inicio, el logotipo está al frente y al centro, pero en las páginas secundarias, el logotipo es superior y derecho.

Pensé que sería una buena señal visual (al hacer clic en un enlace a una página secundaria) utilizar jQuery para animar el movimiento del logotipo desde el medio hasta la esquina de la página.

el problema: la página secundaria se carga más rápido que la animación completa.

pregunta: ¿hay alguna forma de pausar el seguimiento de enlace hasta después de que la animación se haya completado?

Answer 1

Debería poder usar la función animada que se muestra aquí: (jquery doc)

Dice que la devolución de llamada no se debe ejecutar hasta que se complete la animación.

función de devolución de llamada (Opcional)
Una función que se ejecutará cada vez que se complete la animación, se ejecutará una vez por cada elemento animado.

Answer 2

Prueba esto:

 $("#thelink").click( function(){
  $(this).animate( { animation stuff }, "medium", "easeboth", function(){
    document.location = $(this).attr(''href'');  
  });
 });

O cuando el enlace no está animado, pero la imagen (como dice su pregunta):

 $("#thelink").click( function(){
  $("#theImg").animate( { animation stuff }, "medium", "easeboth", function(){
    document.location = $("thelink").attr(''href'');  
  });
 });

Answer 3

Sé que probablemente no quieras escuchar esto, pero lo que estás haciendo es un gran no-no en términos de usabilidad.

Desea crear un efecto genial y, al hacerlo, ralentizar la experiencia de su usuario. En la actualidad, los visitantes de la web están muy ocupados y cuando hacen clic en un enlace, quieren llegar allí lo antes posible. Perderá un porcentaje de visitantes en el proceso y agravará a muchos otros solo por el bien de un pequeño caramelo visual.

Answer 4

También debe devolver el valor falso o evitar la acción predeterminada del evento de clic de ancla, de lo contrario, el navegador simplemente seguirá el href. De todos modos, estoy de acuerdo en que una demostración en vivo es mejor que 1000 palabras.

Vea una demostración en vivo aquí

p.ej

 $(''#myLink'').click( function(ev){
   //prevent the default action of the event, this will stop the href in the anchor being followed
   //before the animation has started, u can also use return false;
   ev.preventDefault();
   //store a reference to the anchor tag
   var $self=$(this);
   //get the image and animate assuming the image is a direct child of the anchor, if not use .find
   $self.children(''img'').animate( {height:"10px"}, function(){
       //now get the anchor href and redirect the browser
       document.location = $self.attr(''href'');
   });
 });

Answer 5

No es necesario escribir ninguna función, solo use el método de evento jQuery incorporado event.preventDefault () (esto quizás no estaba disponible en el momento en que se publicó esta pregunta).

http://api.jquery.com/event.preventDefault/

Answer 6

simplemente devuelve falso en la función de devolución de llamada.

Answer 7

solo en caso de que alguien esté interesado en esta variación ...

Quería que el enlace en sí estuviera separado de la imagen que está animada , modifiqué un poco el código y ahora lo tengo funcionando.

el javascript / jquery:

print(" $(function()
    {
        $(''#myLink'').click( function(ev){
            //prevent the default action of the event, this will stop the href in the anchor being followed
            //before the animation has started, u can also use return false;
            ev.preventDefault();
            //store a referene to the anchor tag
            var $self=$(''img#myImage'');
            var $link=$(''a#myLink'');
            //get the image and animate
            ($self).animate( {height:"10px"}, function(){
                //now get the anchor href and redirect the browser
                document.location = $link.attr(''href'');
            });
        });
    });
");

el marcado:

print("<body>
<a id="myLink" href="http://www.google.co.uk">LINK</a>

<img id="myImage" src="http://www.derekallard.com/img/post_resources/jquery_ui_cap.png"/>
</body>");

dicho eso, probablemente estoy enojado con el código. así que mis disculpas allí.

Answer 8

No todos los sitios web son iguales. En un sitio de portafolio: perfectamente aceptable tener pequeñas animaciones e interfaz "genial", en una herramienta como la búsqueda de Google, si el logotipo se animara cada vez antes de que pudiéramos usar la barra de búsqueda, se retrasaría.