5

这正是我正在寻找的东西：http: //hoverstud.io 。我不是在寻找这样的东西-> http://bit.ly/11jdunO，它有太多的问题和错误。

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

4

3 回答 3

7

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

$(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。

于 2013-06-06T10:04:51.733 回答
6

我会为此使用一些更新和更清洁的工具。现在你可以使用 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或类似的东西为单页 Web 应用程序实现这一点几乎是微不足道的。

更多注意事项：

  • 如果您想等到页面图像也被加载，您可以使用document.onload而不是$(document).ready().
  • 如果document.querySelector和classLists可供您使用，那么不使用 jQuery 几乎同样容易实现。
于 2014-09-13T02:22:37.397 回答
2

我建造了这样的东西。

首先在这样的 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;
     });
});

你完成了:)

第一部分是让你的预加载器在窗口加载时出现，然后淡出。

第二种是在archor上绑定一个点击fadeIn预加载器并重定向到archor的href。

于 2015-06-13T01:19:56.607 回答