Skip to content

Instantly share code, notes, and snippets.

@tiennv90

tiennv90/delayAnimate.html

Last active March 25, 2016 16:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tiennv90/9419a9401bbef736fdcf to your computer and use it in GitHub Desktop.
Save tiennv90/9419a9401bbef736fdcf to your computer and use it in GitHub Desktop.
Download ZIP
Raw
delayAnimate.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>delay demo</title>
<style>
div {
position: absolute;
width: 60px;
height: 60px;
float: left;
}
.first {
background-color: #3f3;
left: 0;
}
.second {
background-color: #33f;
left: 80px;
}
.third {
background-color: greenyellow;
left: 160px;
}
.fourth {
background-color: rebeccapurple;
left: 240px;
}
.fiveth {
background-color: red;
left: 320px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p><button>Run</button></p>
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
<div class="fourth"></div>
<div class="fiveth"></div>
<script>
var delayTime = 1000;
$( "button" ).click(function() {
animate();
setInterval(animate, delayTime * 10 * 5);
});
function animate(){
console.log("call");
$( "div.first" ).slideUp( 300 ).delay(0).fadeIn( 500 ).fadeOut(500);
$( "div.second" ).fadeOut(0).delay(delayTime * 10).slideUp( 300 ).fadeIn( 400 ).fadeOut(500);
$( "div.third" ).fadeOut(0).delay(delayTime * 10 * 2).slideUp( 300 ).fadeIn( 400 ).fadeOut(500);
$( "div.fourth" ).fadeOut(0).delay(delayTime * 10 * 3).slideUp( 300 ).fadeIn( 400 ).fadeOut(500);
$( "div.fiveth" ).fadeOut(0).delay(delayTime * 10 * 4).slideUp( 300 ).fadeIn( 400 ).fadeOut(500);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment