Question

这是我正在寻找的东西：http://hoverstud.io 。我不是在寻找像这样的东西 - ＆gt; http://bit.ly/11jdunO，其中存在太多问题和错误。

有人可以帮我找一个教程或一些链接吗？

Answer 1

我不确定你到底想要什么，但你可以使用这样的代码：

$(document).ready(function(){
    // to fade in on page load
    $("body").css("display", "none");
    $("body").fadeIn(400); 
    // to fade out before redirect
    $('a').click(function(e){
        redirect = $(this).attr('href');
        e.preventDefault();
        $('body').fadeOut(400, function(){
            document.location.href = redirect
        });
    });
})

它会淡化整个页面。如果您想淡化页面的一部分，请根据需要更改body。

Answer 2

我会使用一些更新更清洁的工具。现在你可以使用CSS转换来做到这一点。

这是一个非常简单的例子：

<html>
  <head>
    <style>
      .container {
        opacity: 0;
        transition: opacity 1s;
      }

      .container-loaded {
        opacity: 1;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <!-- All the content you want to fade-in here. -->
    </div>
    <script>
      $(document).ready(function() {
        $('.container').addClass('container-loaded');
      });
    </script>
  </body>
</html>

我在这里假设页面之间的转换是整页重新加载，因此一旦页面重新加载，container-loaded类就会消失。

但是，对于使用任何流行框架Turbolinks或类似内容的单页网页应用程序来实现这一点应该是微不足道的。

更多注意事项：

如果您想等到页面图片也加载，您可以使用document.onload代替$(document).ready()。
如果document.querySelector和classLists可供您使用，那么在不使用jQuery的情况下实施起来就差不多了。

Answer 3

我建造了这样的东西。

首先在像这样的div上的HTML上放置一个#preloader

<div id="preloader"></div>

如果你愿意，可以在里面放一个gif。

然后设置一些CSS：

#preloader {
        background: #FFF;
        bottom: 0;
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 9999;
    }

现在制作一些这样的脚本：

$(window).load(function() {
     $('#preloader').delay(350).fadeOut('slow');
});

$('a').click(function(e){
     e.preventDefault();
     t = $(this).attr('href');
     $('#preloader').delay(350).fadeIn('slow',function(){
          window.location.href = t;
     });
});

你完成了：）

第一部分是在加载窗口时显示预加载器，然后是fadeOut。

第二种是将拱门上的点击绑定到fadeIn预加载器并重定向到archor的href。

使用加载图像动画在html页面之间平滑过渡

3 个答案: