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

atrás historia: 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 el & superior derecho.¿Cómo detener el seguimiento del enlace hasta después de que se haya completado jQuery .animate?

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

el problema: la página secundaria 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?

Fuente

2008-12-08 jon

Si bien esto sin duda es un buen truco ... cualquier tipo de espera entre el clic y la acción esperada que ocurre frustrará al usuario. En este caso, verán que se mueve el logotipo, luego notará que la página completa se actualiza. Sé que estaría molesto. – Sam

También es necesario volver falsa o prevenir el defecto acción del evento de clic de anclaje; 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.

See a live demo here

por ejemplo

$('#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'); 
    }); 
});

Fuente

2008-12-09 06:55:08 redsquare

Usted debe ser capaz de utilizar la función animado que aparece aquí: (jquery doc)

Se dice que la devolución de llamada no debe ser ejecutada hasta que la animación se ha completado.

de devolución de llamada (opcional) Función
Una función que se ejecuta cada vez que la animación completa, se ejecuta una vez para cada elemento de animación en contra.

Fuente

2008-12-08 23:12:58

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 sus estados de interrogación):

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

Fuente

2008-12-08 23:13:09

hola, lo siento, pero soy bastante un javascript/jquery novato y no puedo hacer cara o cruz de esta parte de su respuesta: document.location = $ ("thelink"). Attr ('href'); intenté esto, pero no parece ser correcto: document.location = $ ("http://google.com") .attr ('href'); ¿sería posible dar ex? – jon

esto no detendrá al cliente siguiendo el enlace a menos que evite la acción predeterminada o devuelva falso del controlador de clics – redsquare

Sé que probablemente no desea oír esto, pero lo que está haciendo es un gran no-no en términos de facilidad de uso.

Quiere 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.

Fuente

2008-12-09 08:51:15 allesklar

por si acaso alguien está interesado en esta variación ...

que quería el propio enlace a estar separado de la imagen que está animado, i vanamente con el código un poco y ahora tengo que trabajar .

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 esto, es probable ugly'd el código. así que mis disculpas allí.

Fuente

2008-12-09 18:36:21 jon

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/

Fuente

2010-01-27 16:01:10 Darrell

simplemente return false en la función de devolución de llamada.

Fuente

2011-12-21 13:59:03 Dynamicnet

Agregue el código requerido para responder la pregunta. –

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.

Fuente

2012-07-23 22:03:07 pushplaybang

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

Respuesta

Cuestiones relacionadas