2

我正在尝试向当用户浏览该站点时页面淡入黑色的站点添加过渡。

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

但是我不确定当用户点击网站的另一部分时如何让页面“从黑色淡出”。

我知道我必须使用点击功能，但我将如何延迟页面加载时间才能看到“淡入黑色”动画？

非常感谢您的时间。

4

2 回答 2

6

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

你可以这样做：

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

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

  return false;
});

谢谢！杰米

于 2009-05-21T16:30:54.273 回答
1

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

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

  // mask effect code here
});

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

于 2009-05-21T16:36:53.780 回答