Задача:
При клике по ссылки, страница сначала плавно исчезает, а потом происходит переход.
Исходные данные:
//Код jquery
//Собираем все ссылки (анкоры) на страцице
$('a').click(function(){
//Плавное погасание всей страницы
$('#all').animate({opacity: 0},2000);
//Переход на следюующую страницу. (проблема в этом месте, т.е. код выполняется параллельно и при нажатии на ссылку сразу возвращатеся return , вопрос: как сделать переход после того как страница погаснет?
`` return true;
});
Добавить комментарий
|
2 ответа
Используйте callback complete который можно передать в опциях функции animate, также чтобы предотвратить выполнение действия по умолчанию в данном случае на ссылках используйте preventDefault.
Пример (JSFiddle):
$(function(){
$('a').click(function(e){
var context = $(this);
$('body').animate({opacity: 0}, {
speed : 2000,
complete : function(){
var domain = location.hostname,
href = context.prop('href');
if (href.indexOf("http://") > -1) {
document.location.href = href;
} else {
document.location.href = domain + href;
}
}
});
e.preventDefault();
});
});