Jquery循环用于定时横幅动画
Jquery Loop for timed banner animation
我一直在学习Jquery,我制作了一个小横幅,可以向外和向后提供信息。但是,我希望它是一个定时循环;它每5分钟播放一次动画。
这是代码:
<!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>
我怎么能把它弄得太循环?
此外,如果您发现通用代码有任何错误,如果您指出,我们将不胜感激!我是Jquery、JS和HTML/CSS的新手,所以积极的批评会帮助我学习!
谢谢!
您可以使用setInterval函数每隔X毫秒执行一次代码请在此处查看详细信息:http://www.w3schools.com/js/js_timing.asp
相关文章:
- 如何设置html元素填充的动画
- 如何使用动画实现纸张推车
- 如何在生成下载文件时显示加载动画
- 剑道网格jQuery动画()问题
- EaseJS拖放;放下(动画CC)电影剪辑的鼠标坐标
- jQuery Lazy加载动画滚动
- jquery动画可以通过编程链接吗
- Javascript将数学动画化
- 动画.CSS重播
- 制作一个不带HTML a标记但在动画播放完毕后指向其他页面的超链接
- 如何使用jQuery在动画中期加速动画
- 使用数据上的角度更改设置集合的第一个元素的动画
- 绑定时将Parsley minlength消息作为选项传递时,未对其进行自定义
- 定时动画gif显示
- 纯JavaScript - 定时动画 - 一致的高度
- 具有自动定时动画和控件的自定义滑块
- 如何停止基于jQuery延迟定时器的动画
- Jquery循环用于定时横幅动画
- 如何使用全局定时器所有的javascript动画页面
- CSS3背景图像定时动画