如何在使用jQuery离开页面时添加页面转换

Question

我正在尝试向用户浏览网站时页面淡化为黑色的网站添加转换.

我决定实现这一目标的最佳方法是创建一个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');
});

但是,当用户点击网站的其他部分时,我不确定如何让页面"淡出黑色".

我知道我必须使用点击功能,但是如何延迟页面加载以及能够看到"淡入淡出"动画？

非常感谢你的时间.

Answer 1

您可以绑定到click()事件并使其返回false,从而阻止默认操作(页面转到链接的href).然后,您可以将回调绑定到fadeIn()方法,该方法将文档的位置设置为链接的超文本引用.

你可以这样做:

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

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

  return false;
});

谢谢!杰米