2011-08-07 10 views
8

Estoy trabajando en un sitio web donde haga clic en un determinado enlace que se deslizará hacia abajo en un panel de inicio de sesión. Estoy usando event.preventDefault() para detener el redireccionamiento del sitio, así como un evento de animación para deslizar el panel hacia abajo. Cuando se hace clic en el enlace, el panel se desliza hacia abajo y la url permanece sin cambios.Use JQuery preventDefault(), pero siga agregando la ruta a la URL

Lo que quiero que ocurra cuando se hace clic en el enlace es que el panel se anime de forma normal, pero que el atributo href del enlace se muestre en la url. En este caso, sería algo como esto: http://domain_name/#login.

Aquí está el código que tengo que va ahora:

$("#login_link").click(function (e) { 
    e.preventDefault(); 
    $("#login").animate({ 'margin-top': 0 }, 600, 'linear'); 

    window.location.hash = $(this).attr('href'); 
}); 

Este código se suma con éxito el '#login' a la URL como se desee, pero se salta la animación del panel de inicio de sesión. Al hacer clic en el enlace, el panel simplemente aparece al instante. Me gustaría mantener tanto la animación como los comportamientos de URL actualizados. es posible?

+0

Esto puede ser una pregunta tonta, pero ¿está seguro de que la animación jquery funciona cuando la línea de código window.location.hash está comentada? –

+4

¿Podría aceptar las respuestas a las preguntas que ha hecho? Estoy seguro de que al menos algunos de ellos tienen respuestas decentes ... a la gente generalmente le gusta el reconocimiento por su trabajo. – tjameson

+0

¿Qué ocurre cuando omites la línea 'e.preventDefault()'? –

Respuesta

2

utilice el código de abajo. solo llame al hash en el evento de animación completada.

$("#login_link").click(function (e) { 
    e.preventDefault(); 
    $("#login").animate({ 'margin-top': 0 }, 600, 'linear', function(){ window.location.hash = $(this).attr('href'); }); 

}); 
+0

elimino el mío, así que el tuyo solo después de haber publicado :) – Dementic

1

no estoy seguro pero es posible abeja en busca de esta característica

1> cuando se hace clic en un cuerpo de acceso, URL cambia a abc.com/#login~~V~~3rd, y la animación panel de la conexión se produce

o

2> cuando un cuerpo simplemente escribe abc.com/#login en url, espera el mismo comportamiento (animación del panel de inicio de sesión).

Lo que está haciendo actualmente funcionará solo para case1 y no funcionará para case2. Si desea que la animación (o lo que sea) funcione tanto, cuando se hace clic en ella, o simplemente se escribe en url. Necesitas algún mecanismo para detectar cambios hash.

Hay un famoso plugin de http://benalman.com/projects/jquery-bbq-plugin/

ir a ver este plugin y, mira cómo se hacen las cosas. Si encuentras algo difícil de entender estamos aquí !!

Cuestiones relacionadas