Question

我是初学者，试图开发自己的网站以获得乐趣。我输入了以下代码，但是jQuery fadeIn / Out动画看起来很麻烦，我希望它们更顺畅。帮助

PS-这里的所有代码都已经在http://www.pratinav.ml，所以如果您更容易查看代码，那就去那里。

<body>
<div class="loader"></div>
<div class="landing"></div>
<div class="ldesp">
    <h1>PRATINAV<span class="dsp3">BAGLA</span></h1>
</div>
<div class="desp">
    <h1>PRATINAV<span class="dsp1">BAGLA</span></h1>
    <h4>STUDENT | PHOTOGRAPHER | PROGRAMMER | GAMER | HUMAN <span class="dsp2">&bull; ENOUGH SAID.</span></h4>
</div>
<div class="nav">
    <ul>
        <li>ME</li>
        <li>STUFF I DO</li>
        <li>MEET ME?</li>
    </ul>
</div>

@charset "utf-8";
/*CSS document*/

.landing{
    display:none;
    position:absolute;
    z-index:-99;
    top:0;bottom:0;left:0;right:0;
    height:100vh;
    background: -webkit-linear-gradient(to right, #f6f1d3, #648880, #293f50);
    background:    -moz-linear-gradient(to right, #f6f1d3, #648880, #293f50);
    background:      -o-linear-gradient(to right, #f6f1d3, #648880, #293f50);
    background:         linear-gradient(to right, #f6f1d3, #648880, #293f50);
    -webkit-background-size:cover;
       -moz-background-size:cover;
         -o-background-size:cover;
            background-size:cover;
    /*background:url('images/tunnel.jpg') no-repeat center center fixed;*/  
}

.ldesp h1, .nav li{
    cursor:pointer;
}

.ldesp{
    display:none;
}

.ldesp h1{
    font-family:Raleway;
    color:white;
    text-align:center;
    font-size:30px;
    font-weight:400;
}

.ldesp h1:hover{
    color:#e6e6e6;
    -webkit-transition:color 0.5s;
    -moz-transition:color 0.5s;
    -o-transition:color 0.5s;   
}

.dsp3{
    font-weight:100;
}

.desp{
    display:none;
    font-family: 'Raleway';
    color:white;
    text-align:center;
    position:relative;
    top:20vh;
}


.desp h1{
    text-decoration:none;
    color:white;
    font-size:130px;
    font-weight:400;
}

.desp h1:hover{
    color:#e6e6e6;
    transition:color 0.5s;
    -webkit-transition:color 0.5s;
    -moz-transition:color 0.5s;
    -o-transition:color 0.5s;
}

.dsp1{
    font-weight:200;
}

.desp h4{
    font-size:30px;
    font-weight:200;
    position:relative;
    top:-13vh;
}

.desp h4:hover{
    color:#e6e6e6;
    -webkit-transition:color 0.5s;
    -moz-transition:color 0.5s;
    -o-transition:color 0.5s;
}

.dsp2{
    font-weight:400;
}

.nav{
    display:none;
    color:white;
    font-family:'Raleway';
    font-weight:300;
    text-align:center;
}


.nav li{
    list-style-type:none;
    display:inline;
    font-size:30px;
    padding-left:10vh;
    padding-right:10vh;
    position:relative;
    top:5vh;
}

.nav li:hover{
    border-bottom:solid 1px #e6e6e6;
    color:#e6e6e6;
    -webkit-transition:color 0.5s;
    -moz-transition:color 0.5s;
    -o-transition:color 0.5s;   
}


    // JavaScript Document
$(document).ready(function(){
    $('.loader').fadeOut('fast');
    $('.landing').fadeIn('fast');
    $('.desp').fadeIn('fast');
    $('.nav').fadeIn('fast');
    $('.nav').click(function(){
        $('.desp').fadeOut('fast');
        $('.nav').fadeOut('fast');
        $('.ldesp').fadeIn('fast');
    });
    $('.ldesp').click(function(){
        $('.desp').fadeIn('fast');
        $('.nav').fadeIn('fast');
        $('.ldesp').fadeOut('fast');        
    });
});

Answer 1

我发现了问题 - fadeIn和fadeOut同时运行 - 它也固定在网站上。对不起暂时在免费服务器上弹出它：P

如何让jQuery更加流畅？

1 个答案: