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;
});

谢谢！杰米

Answer 2

捕获click事件并防止发生默认行为：

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

  // mask effect code here
});

event.preventDefault()类似于在非jQuery JavaScript中使用onclick='function(); return false;'。

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

2 个答案: