Используйте JQuery protectDefault (), но все же добавьте путь к URL - PullRequest
Новая
       25

Используйте JQuery protectDefault (), но все же добавьте путь к URL

10 голосов
/ 07 августа 2011

Я работаю над сайтом, где нажатие на определенную ссылку будет скользить вниз по панели входа в систему. Я использую event.preventDefault(), чтобы остановить перенаправление сайта, а также событие анимации, чтобы сдвинуть панель вниз. При нажатии на ссылку панель сдвигается вниз, а URL остается неизменным.

Когда я нажимаю на ссылку, я хочу, чтобы панель анимировалась как обычно, а атрибут href ссылки должен отображаться в URL. В этом случае это будет примерно так: http://domain_name/#login.

Вот код, который я получил сейчас: 

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

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

Этот код успешно добавляет «#login» в URL по желанию, но пропускает анимацию панели входа в систему. При нажатии на ссылку панель просто появляется мгновенно. Я хотел бы сохранить как анимацию, так и обновленное поведение URL. Это возможно?

Ответы [ 2 ]

3 голосов
/ 07 августа 2011

используйте код ниже. просто вызовите хэш в событии анимации завершено. 

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

});
1 голос
/ 07 августа 2011

Я не уверен, но вы, возможно, ищете эту функцию

1>, когда некоторые пользователи нажимают на кнопку входа, URL-адрес изменяется на abc.com/#login и анимация панели входа происходит

или

2> когда какое-то тело просто набирает abc.com/#login в URL, вы ожидаете того же поведения (анимация панели входа в систему).

То, что вы делаете в данный момент , будетработать только для case1 и не работать для case2.Если вы хотите, чтобы анимация (или что-то еще) работала как при нажатии, так и при вводе URL-адреса.Вам нужен механизм для обнаружения изменений хеша.

Есть знаменитый плагин http://benalman.com/projects/jquery-bbq-plugin/

Идите и посмотрите этот плагин и посмотрите, как все делается.Если вы найдете что-то сложное для понимания, мы здесь !!

...