Użyj JQuery preventDefault(), ale nadal dodawaj ścieżkę do adresu URL

Question

Pracuję na stronie internetowej, w której kliknięcie określonego linku spowoduje zsunięcie panelu logowania. Używam event.preventDefault(), aby powstrzymać witrynę przed przekierowaniem, jak również zdarzenia animacji, aby przesunąć panel w dół. Po kliknięciu łącza panel przesuwa się w dół, a adres URL pozostaje niezmieniony.

To, co chcę zrobić po kliknięciu łącza, to normalne animowanie panelu, ale atrybut href linku do wyświetlenia w adresie URL. W takim przypadku będzie to coś takiego: http://domain_name/#login.

Oto kod mam zamiar teraz:

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

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

Ten kod skutecznie dodaje „#login” do adresu URL jako pożądany, ale pomija animację panelu logowania. Po kliknięciu linku panel pojawia się natychmiast. Chciałbym zachować zarówno animację, jak i zaktualizowane zachowania URL-i. czy to możliwe?

Answer 1

użyj poniższego kodu. po prostu wywołaj hash w zakończonej animacji imprezie.

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

}); 

Answer 2

Nie jestem pewien, ale może pszczoła szuka tej funkcji

1> gdy niektóre ciała kliknie logowanie, zmiany URL do abc.com/#login i animacja panel logowania pojawia

lub

2> gdy niektóre ciało po prostu wpisuje adres abc.com/#login w adresie URL, oczekuje się takiego samego zachowania (animacja panelu logowania).

Co robisz obecnie będzie działać tylko w przypadku 1 i nie będzie działać na case2. Jeśli chcesz, aby animacja (lub cokolwiek innego) działała zarówno po kliknięciu, jak i po prostu wpisaniu adresu URL. Potrzebujesz mechanizmu do wykrywania zmian hash.

znajduje się słynny wtyczki http://benalman.com/projects/jquery-bbq-plugin/

pójść i zobaczyć ten plugin i wyglądać jak rzeczy są zrobione. Jeśli znajdziesz coś trudnego do zrozumienia, jesteśmy tutaj!