使用jQuery在页面之间淡入淡出 [英] Fade between pages using jquery

问题描述

我正在尝试使用Jquery向我的网站添加过渡效果. 一切正常，但是突然之间，该站点开始闪烁一次，直到渐隐效果消失了……我添加了display:none，此问题已解决.但是，如果访问者禁用了JavaScript，则将无法查看该网站. 我已经将它添加为脚本，但是它不起作用...有什么想法吗? 这是我的淡入淡出代码:

I'm trying to add a transition effect to my site with Jquery. Everything was working, but suddenly the site started flickering one time before the fade in effect... I add a display:none and it was solved. But if visitors have JavaScript disabled, they won’t be able to view the site. I've already add it as a script but it doesn't work... Any ideas? Here is my fade code:

<!--transition-->
    <script type="text/javascript">
        $(document).ready(function() {

            $("body").css("display", "none");
            $("img").css("display", "none");

            $("body").fadeIn(2000);
            $("img").fadeIn(2000);

            $("a.link").click(function(event){
            event.preventDefault();
            linkLocation = this.href;
            $("body").fadeOut(1000, redirectPage);
            $("img").fadeOut(1000, redirectPage);   
        });

        function redirectPage() {
            window.location = linkLocation;
        }

        });
    </script>

推荐答案

您只能使用CSS来执行渐变效果，就像这样:

You can perform the fade in transition using CSS only, like so:

body {
    animation: myfadeInAnimation 2s;
}
div {
    width: 300px;
}
@keyframe myfadeInAnimation {
    from {opacity: 0;}
    to {opacity: 1;}
}
@-webkit-keyframes myfadeInAnimation {
    from {opacity: 0;}
    to {opacity: 1;}
}

这是 JSFiddle 演示

对于淡出效果，如果浏览器将不运行javascript，则您将无法检测到窗口卸载并为其触发效果...

As for the fade out effect, if the browser will not be running javascript, you will have no means of detecting the window unload and trigger an effect for it...

这篇关于使用jQuery在页面之间淡入淡出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！