Jquery 通过加载图像动画在html页面之间平滑过渡_Jquery_Transition

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

jquery

Jquery 通过加载图像动画在html页面之间平滑过渡,jquery,transition,Jquery,Transition,这正是我想要的： . 我不是在寻找像这样的东西->，它有太多的问题和bug 有人能帮我找到一个教程或一些链接吗？我不确定你到底想要什么，但你可以使用这样的代码： $(document).ready(function(){ // to fade in on page load $("body").css("display", "none"); $("body").fadeIn(400); // to fade out before redirect $('

这正是我想要的： . 我不是在寻找像这样的东西->，它有太多的问题和bug

有人能帮我找到一个教程或一些链接吗？

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

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

它会使整个页面褪色。如果您只想淡出页面的一部分，可以随意更改

正文。我会使用一些更新和更干净的工具来实现这一点。
现在，您可以使用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>


.集装箱{
不透明度：0；
过渡：不透明度1s；
}
.已装货柜{
不透明度：1；
}
$（文档）.ready（函数（）{
$（'.container'）.addClass（'container-loaded'）；
});

在这里，我假设页面之间的转换是一个完整的页面重新加载，因此一旦页面重新加载，容器加载的类就消失了
但对于使用任何流行框架或类似框架的单页web应用程序来说，实现这一点应该是微不足道的
需要注意的更多事项：

如果要等待页面图像也加载完毕，可以使用document.onload
而不是$（document.ready（）
）
如果和对您可用，那么不使用jQuery几乎同样容易实现
我建造了这样的东西
首先在像这样的div上的HTML上放置一个预加载程序
<div id="preloader"></div>

现在制作如下脚本：
$(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的单击以淡入预加载程序并重定向到archor的href
 您使用的语言和环境是什么？使用HTML和CSS的简单页面您可以在单击链接时淡出正文
，然后重定向，然后淡入新页面的正文。这就是你想要的吗？是的。如果你访问过我提到的第二个链接，它几乎与你给出的代码相同，并且有一些错误，比如闪烁一次，加载多次等等。我真的需要一些类似于我给出的示例站点的东西。我见过使用#的网站！url中的技术。我不知道他们为什么用它。但是，几乎所有这些网站都使用了类似于ajax的转换，你知道第一页是怎么做的吗？我真的很想知道你几乎找到了解决办法。在这里分享>这正是我想要的信息，请你粘贴工作示例。我试过了：但是当我去另一个网站的时候，什么也没发生。如果你能原谅我耽搁太久的话，这里有一个有效的演示：添加css类以避免尴尬的错误，这是一个很好的证明
$(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;
     });
});