Jquery Loop for timed banner animation

Question

I have been learning Jquery and i made a small banner that animates out, and back in giving information. But, i would like it to be on a timed loop; ie. It runs the animation every 5 mins.

This is the code:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script> 
do {
    var i = 1
$(document).ready(function(){
    $("#twitter").delay(200).animate({left:'225px'}, "slow").delay(5000).animate({left:'-225px'}, "slow");
    $("#tag_line").delay(300).fadeIn(2000).delay(2500).fadeOut(1000);
    $("#content").delay(1000).slideDown("slow").delay(3000).slideUp("slow");
    var box=$("#box");
        box.animate({width:'toggle'},"normal").delay(500);
        box.animate({height:'180px'},"slow").delay(3000);
        box.animate({height:'100px'},"slow").delay(750);
        box.animate({width:'toggle'},"normal").delay(3000);
  });
}
while (i < 2)
</script>

<style> 
#twitter
{
    height:100px;
    width:140px;
    position:absolute;
    z-index:20;}
#box
{
    background:lightgrey;
    height:100px;
    width:350px;
    opacity:0.2;
    display:none;
    position:absolute;
    z-index: 10;
    border-style: outset;
    border-width: large;
    border-color: black;
}
#container {
    width: 100px;
    height: 100px;
    position:absolute;
}
#tag_line {
    position:absolute;
    z-index:15;
    display:none;
    padding-left:15px;
    font-size:30px;
    height:60px;
    line-height:24px;
    font-family:"SF Slapstick Comic";
    color: red;
}
#content {
    position:absolute;
    z-index:15;
    display:none;
    padding-left:15px;
    padding-top:90px;
    font-size:30px;
    height:60px;
    line-height:24px;
    font-family:"SF Slapstick Comic"
}
</style>
<title>Test Jquery</title>
<meta charset="utf-8">
</head>
<body>
<div id="container">
    <div id="tag_line"><h1>Twitter</h1></div>
    <div id="twitter"><img src="img/logo/twitter.png" width="140" height="100"></div>
    <div id="content"><h2>@Geekster_Alan</h2></div>
    <div id="box"></div>
</div>

</body>
</html>

How would i get it too loop?

Also, if you see anything wrong with the general code it would be appreciated if you point it out! I am new to Jquery, JS and HTML/CSS so positive criticism will help me learn!

Thanks!

Answer 1

您可以使用setInterval函数每X ms执行一次代码，请参见此处的详细信息： http : //www.w3schools.com/js/js_timing.asp

Jquery Loop for timed banner animation

Question

1 answers

solution1
0 ACCPTED 2014-10-02 23:15:56

Jquery Loop for timed banner animation

Question

1 answers

solution1 0 ACCPTED 2014-10-02 23:15:56

solution1
0 ACCPTED 2014-10-02 23:15:56