<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.min.js"></script>
<style>
.a1{
position: absolute;
top:40%;
left:20%;
width:40px;height:40px;
transition: all .3s;
background-color: red
}
.a2{
position: absolute;
top:40%;
left:30%;
width:40px;height:40px;
transition: all .3s;
background-color: red
}
.a3{
position: absolute;
top:40%;
left:40%;
width:40px;height:40px;
transition: all .3s;
background-color: red
}
.a4{
position: absolute;
top:40%;
left:50%;
width:40px;height:40px;
transition: all .3s;
background-color: red
}
.a5{
position: absolute;
top:40%;
left:50%;
width:40px;height:40px;
transition: all .3s;
background-color: red
}
.a6{
position: absolute;
top:40%;
left:60%;
width:40px;height:40px;
transition: all .3s;
background-color: red
}
</style>
</head>
<body>
<div class="a1">
</div>
<div class="a2">
</div>
<div class="a3">
</div>
<div class="a4">
</div>
<div class="a5">
</div>
<div class="a6">
</div>
<span></span>
<script>
$(function(){
var nums=["a1","a2","a3","a4","a5","a6"];
var ddd=$('div');
function mm(){
nums.forEach(function(i){
ddd.queue(function(){
$('.'+i).css({
"top":"10%"
})
var n = $("div").queue("fx");
$("span").text("Queue length is: " + n.length);
})
})
ddd.dequeue();
}
setTimeout(function() {
mm();
}, 2000);
})
$(function(){
var $content = $('body div');
for (var i = 0; i < $content.length; i++) {
(function($this,i){
setTimeout(function(){
$this.css({
"top":"10%"
})
},i*100)
})($($content[i]),i)
};
})
function an(index){
$("li:eq("+index+")").animate({left:100},500,"",function(){
an(index+1)
})
};
an(0);
</script>
</body>
</html>
笔记
最新推荐文章于 2024-05-22 08:48:46 发布