Как добавить переход страницы при выходе из страницы с помощью jQuery - PullRequest
Новая
       19

Как добавить переход страницы при выходе из страницы с помощью jQuery

2 голосов
/ 21 мая 2009

Я пытаюсь добавить переход на сайт, где страница становится черной, когда пользователь перемещается по сайту.

Я решил, что лучший способ добиться этого - создать div, который замаскирует страницу в темноте, а затем оживит ее с помощью jQuery.

До сих пор мне удалось создать код для эффекта "плавного перехода к черному" ... 

$(document).ready(function(){
    // Insert mask after container
    $('.container').after('<div class="mask"></div>');
    // Delay the fadeOut effect for half a second so you can actually see it
    $('.mask').animate({opacity: 1.0}, 500)
    // Slowly make the mask dissapear
    .fadeOut('slow');
});

Но я не уверен, как заставить страницу «исчезать с черного», когда пользователь нажимает на другую часть сайта.

Я понимаю, что мне пришлось бы использовать функцию щелчка, но как бы я задержал загрузку страницы во времени, чтобы увидеть анимацию "исчезать на черном"?

Большое спасибо за ваше время.

Ответы [ 2 ]

6 голосов
/ 21 мая 2009

Вы можете привязать к событию click () и заставить его возвращать false, тем самым предотвращая действие по умолчанию (страница переходит к ссылке href). Затем вы можете привязать обратный вызов к методу fadeIn (), который устанавливает местоположение документа для ссылки гипертекста ссылки.

Вы могли бы сделать что-то вроде этого: 

$('a').click(function(){
  var url = $(this).attr('href');

  $('.mask').fadeIn('slow', function(){
    document.location.href = url;
  });

  return false;
});

Спасибо! Джейми

1 голос
/ 21 мая 2009

Захват события click и предотвращение поведения по умолчанию: 

$('a').click(function(event) {
  event.preventDefault();

  // mask effect code here
});

event.preventDefault() похоже на использование onclick='function(); return false;' в JavaScript, не поддерживающем jQuery.

...