Use JQuery preventDefault(), but still add the path to the URL

Question

I am working on a website where clicking on a certain link will slide down a login panel. I am using event.preventDefault() to stop the site from redirecting as well as an animation event to slide the panel down. When the link is clicked, the panel slides down and the url remains unchanged.

What I want to happen when the link is clicked is for the panel to animate as normal, but for the href attribute of the link to be shown in the url. In this case it would be something like this: http://domain_name/#login.

Here is the code I've got going right now:

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

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

This code successfully adds the '#login' to the url as desired, but it skips the animation of the login panel. When clicking the link the panel just appears instantly. I would like to keep both the animation and the updated url behaviors. Is this possible?

Answer 1

use below code . just call the hash in animation completed event.

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

});

Answer 2

I am not sure but you may bee looking for this feature

1> when some body clicks login, url changes to abc.com/#login, and login panel animation occurs

or

2 > when some body just types abc.com/#login in url, you expect the same behavior (animation of login panel).

What you are doing currently will work only for case1 and wont work for case2. If you want animation (or whatever) to work both, when clicked , or just url typed. You need some mechanism to detect hash changes.

There is a famous plugin http://benalman.com/projects/jquery-bbq-plugin/

Go and see this plugin and, look how things are done. If you find anything tough to understand we are here!!