javascript - How to make jQuery fade smoother? -
i beginner, trying develop own web site fun. put in following code inbut jquery fadein/out animations seem buggy , them smoother. help?
ps- code here live @ http://www.pratinav.ml , if easier review code go there.
<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">• enough said.</span></h4> </div> <div class="nav"> <ul> <li>me</li> <li>stuff 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'); }); });
i found problem- fadein , fadeout running simultaneously- fixed on site well. sorry pop ups on free server :p
Comments
Post a Comment