Jquery 淡入淡出在过渡开始之前添加了闪烁答案

【问题标题】：Jquery fadein adds a flicker before the transition kicks inJquery 淡入淡出在过渡开始之前添加了闪烁
【发布时间】：2015-04-22 16:45:12
【问题描述】：

嘿 :) 我正在尝试在我网站上的每个页面之间制作淡入淡出效果，并在您单击重定向到给定网址的链接时实现淡出效果。但是在淡入淡出效果开始之前我得到了一些奇怪的闪烁效果。知道如何解决这个问题吗？

我使用的是无冲突包装器，因为我使用的是 Wordpress。

// Adding Wordpress Jquery selector($) support
jQuery(document).ready(function($) {
    // Toggle hamburger menu for mobile devices
    $(".menu-toggle").click(function(){
        $(".main-navigation").toggleClass("navigation-toggle");

    });
    // Transition between pages
    $(document).ready(function(){
        // to fade in on page load
        $("body").css("display", "none");
        $("body").fadeIn(1500); 
     })

    // delegate all clicks on "a" tag (links)
    $(document).on("click", "a", function () {

        // get the href attribute
        var newUrl = $(this).attr("href");

        // veryfy if the new url exists or is a hash
        if (!newUrl || newUrl[0] === "#") {
            // set that hash
            location.hash = newUrl;
            return;
        }

        // now, fadeout the html (whole page)
        $("html").fadeOut(function () {
            // when the animation is complete, set the new location
            location = newUrl;
        });

        // prevent the default browser behavior.
        return false;
    });

});

【问题讨论】：

尝试删除$("body").css("display", "none");

标签： jquery

【解决方案1】：

尝试用 $("body").css("opacity", "0"); 替换 $("body").css("display", "none"); ，链接 .fadeTo(1500, 1); 替换 $("body").fadeIn(1500);

   $(document).ready(function() {
     // to fade in on page load
     $("body").css("opacity", "0")
     .fadeTo(1500, 1);
   })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<body>
  abc
</body>

【讨论】：

当我转到另一个页面时会出现闪烁效果。索引页没有闪烁效果。 put from index -> 在身体闪烁时联系淡入淡出然后淡入。
@MikkelMadsen 尝试在每一页包含相同的js 吗？
是的，代码在 jquery lib 之后的 wordpress 标头中：/
@MikkelMadsen 尝试删除 $("html").fadeOut() 吗？，将event参数添加到click事件，在click处理程序的开头设置event.preventDefault()？
jsfiddle结果出现block setting window.location，试试jsfiddle.net/gct7h16h/2

【解决方案2】：

你正在淡入和淡出 html，试试 $('html, body').fadeIn/Out

【讨论】：