3

我在使用 jQuery 的网页的淡入和淡出时遇到问题。当脚本运行时，我的页面淡出，然后我得到一个白色的闪光，然后我的新页面淡入。这是这个 jQuery 效果的典型情况吗？这对我来说是个问题，因为该站点非常暗，背景为黑色，因此非常刺耳。

下面是我用来运行这些效果的脚本。生成这个的页面重定向可能是一个问题吗？有没有更有效的方法来做到这一点？

$(document).ready(function() {

    $("body").css("display", "none");

    $("body").fadeIn(2000);

    $("a.transition").click(function(event){
        event.preventDefault();
        linkLocation = this.href;
        $("body").fadeOut(1000, redirectPage);      
    });

    function redirectPage() {
        window.location = linkLocation;
    }

});

提前谢谢各位。感谢帮助。

帕特里克

4

4 回答 4

2

当淡出动画完成时，它会在 body 上设置 display:none。这可能是您的白色闪光的来源。尝试将整个页面包装在正文中的一个 div 中，然后将该 div 淡出。

或者尝试应用这个 CSS：

html,body {
  background-color:#000;
}
于 2013-07-12T17:47:25.353 回答
1

发生白色闪光是因为在 .ready() 函数被触发之前的那几分钟，你的 body 元素正在显示。这在慢速连接时会变得更糟。

您可能会尝试做的是在您的身体顶部覆盖一个 div，然后将该 div 淡出。但您的结果仍会因浏览器/网络速度而异。

在 CSS 中：

.overlay {
  display: block;
  background-color: #000;
  position: fixed;
  width: 100%; 
  height: 100%;
  z-index: 999;
}

在 JS 中：

$(document).ready(function () {
  $('.overlay').fadeOut();

  $("a.transition").click(function(event){
    event.preventDefault();
    linkLocation = this.href;
    $('.overlay').fadeIn(1000, redirectPage);    
  });
});

这还是很糟糕的。当你加载一个新页面时，你会给浏览器提供很多关于它如何决定转换到下一页的体验。

您可能会考虑通过 AJAX 进行转换：

function transition() {
  var loadContent = $.get('/url-to-content');

  $('.overlay').fadeIn(1000, function () {
    loadContent.then(function (data) { 
      $('.content-div').html(data);
      $('.overlay').fadeOut(1000);
    });
  });
}
于 2013-07-12T17:55:05.100 回答
0

您是否尝试过使用较慢或较快的淡出值？似乎使用较慢的速度可能会有所帮助，但我还没有测试过，所以我不能肯定地说。也可以尝试将伪选择器 :visible 添加到调用中，以便它只选择当前可见的项目。例子：

$("a.transition").click(function(event){
        event.preventDefault();
        linkLocation = this.href;
        $("body:visible").fadeOut(1000, redirectPage);      
    });
于 2013-07-12T17:58:43.503 回答
0

我知道这已经很老了，但我也遇到了同样的问题，我会把我的两分钱放进去。肯定是我正在淡入的元素（一个带有背景图像的 div 正在被延迟加载 - 整个 div 正在淡出在）。

我的解决方案是将它放在自己的覆盖 div 中。然后问题就解决了。

我的覆盖 div，作为我一直在使用延迟加载的元素的第一个子元素：

<div 
  class="bgimg-overlay lazy"
  style="back"
  data-original="<?=$tpldir?>/img/LAST_FRAME_CROPPED.PNG"></div>

div的CSS：

.bgimg-overlay{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
于 2016-08-05T01:33:28.810 回答