Question

此代码重定向到example-page.php：

setTimeout(function() {
  window.location.href = "/example-page.php";
}, 5000);

我试图添加转换效果，因此当它重定向时，它看起来像是向左或向右滚动页面到另一个。任何帮助将不胜感激！我尝试过使用Jquery，但我仍然相当新，并且还在苦苦挣扎。

Answer 1

您可以尝试这样的事情：

var elements = document.getElementsByTagName('body');
setTimeout(function(){
 elements[0].style.opacity = 1;
    (function fade(){
        var opacloader = parseFloat(elements[0].style.opacity);

        (elements[0].style.opacity = opacloader - .1)<0.1?window.location.href='example':setTimeout(fade,40)})();
},4800);

这里基本上是：

4.8秒后，实际页面的主体逐渐淡出。（如果你愿意，你可以添加另一种效果。）当实体页面的正文无效时，重定向就会发生。

在下一页上，您可以执行淡入淡出效果，这可能接近您的预期

HERES A DEMO

要在下一页淡入身体，您可以使用：

var elements = document.getElementsByTagName('body');
elements[0].style.opacity = 0;
(function fadeIn() {

        var opacity = parseFloat(elements[0].style.opacity);

        if (opacity == 1) return;

        elements[0].style.opacity = opacity + 0.1;
        setTimeout(fadeIn, 100); //<<<<<<<< here you set the speed!
    })();

DEMO FADE IN

Answer 2

＆＃13;

(function(){
        document.body.classList.add("fadeout");
        window.setTimeout(function(){
                window.location.href = "http://www.newlocation.com";
        },5000)
})()

＆＃13;

body{
        transition:opacity 5000ms;
        opacity:1;
}
body.fadeout{
        opacity:0;
}

＆＃13;

Answer 3

您应该将过渡效果放在着陆页（example-page.php）中。

例如，您可以使用css规则#wrapper{display:none}隐藏整个身体，并使用jquery显示它滑动

 $(document).ready(function () {
      $('#wrapper').slideToggle(1000);

使用url对页面加载的过渡效果

3 个答案: