利用Jquery队列实现根据输入数量显示的动画
更新时间：2016年09月01日 10:18:06 投稿：daisy
这篇文章给大家演示了如何利用Jquery队列实现输入不同的数量就显示不同的动画效果，文中给出了实例，让大家更容易理解，有需要的可以参考借鉴。
先来看看要实现的效果图
如上面的gif图所示，可以在输入框中，输入要产生的动画的数量，然后点击click me按钮，就产生了效果。产生的效果是通过在数组中预设的几种。这里为了演示方便，没有设置具体的形状，比如可以更换为一些其它的iconfont来实现效果。
实现思路
通过$.queue和$.dequeue来实现动画队列的存取与取出实现效果。首先通过按照input输入的数字来形成对应数量效果对象的数组。然后在把数组存放到$.queue中，最后通过click me按钮触发，一个一个取出动画序列，实现动画。
注意
这里要注意的是，在一个一个取出动画的时候，用到了setInterval，不需要的时候一定要清除计时器，否则会影响序列，不停的取出。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="/jquery-2.1.4.min.js" type="text/javascript"></script>
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 50px;
height: 50px;
border: 1px solid slateblue;
position: relative;
left: 750px;
top: 500px;
}
.animate{
width: 50px;
height: 50px;
border: 1px solid skyblue;
background: slateblue;
opacity: 0;
position: absolute;
}
.up{
z-index: 999;
background: red;
width: 50px;
height: 50px;
border: 1px solid skyblue;
}
#btn{
background: slateblue;
position: absolute;
left: 0;
top: 0;
}
.number{
position: absolute;
top: 600px;
left: 740px;
width: 100px;
height: 30px;
}
#btnTrg{
background: slateblue;
width: 100px;
height: 30px;
border: 0;
position: absolute;
top: 600px;
left: 600px;
}
.result{
position: absolute;
top: 600px;
left: 900px;
width: 100px;
height: 30px;
background: skyblue;
text-align: center;
}
</style>
</head>
<body>
<div id="content"></div>
<div class="box">
<span class="animate1 animate"></span>
<span class="animate2 animate"></span>
<span class="animate3 animate"></span>
<span class="animate4 animate"></span>
<span class="animate5 animate"></span>
<span class="animate6 animate"></span>
<div class="up"></div>
</div>
<div id="btn"></div>
<button id="btnTrg">click me</button>
<input type="text" class="number" id="num"/>
<span class="result"></span>
</body>
<script>
var span1=$(".animate1");
var span2=$(".animate2");
var span3=$(".animate3");
var span4=$(".animate4");
var span5=$(".animate5");
var span6=$(".animate6");
var box=$("#content");
var btn=$("#btn");
var btnTrg=$("#btnTrg");
var input=$("#num");
var result=$(".result");
var resultNum=1;
var ani=[
function () {
span1.css({
background:"red",
opacity:1
}).animate({
left:-300,
top:-100
}, function () {
result.html(resultNum++)
}).animate({
left:-50,
top:-450,
opacity:0.2
}, function () {
$(this).css({
left:0,
top:0,
opacity:0
})
})
},
function () {
span2.css({
background:"blue",
opacity:1
}).animate({
left:-200,
top:-200
}, function () {
result.html(resultNum++)
}).animate({
left:-50,
top:-450,
opacity:0.2
}, function () {
$(this).css({
left:0,
top:0,
opacity:0
})
})
},
function () {
span3.css({
background:"pink",
opacity:1
}).animate({
left:-100,
top:-300
}, function () {
result.html(resultNum++)
}).animate({
left:-50,
top:-450,
opacity:0.2
}, function () {
$(this).css({
left:0,
top:0,
opacity:0
})
})
},
function () {
span4.css({
background:"green",
opacity:1
}).animate({
left:100,
top:-300
}, function () {
result.html(resultNum++)
}).animate({
left:50,
top:-450,
opacity:0.2
}, function () {
$(this).css({
left:0,
top:0,
opacity:0
})
})
},
function () {
span5.css({
background:"orange",
opacity:1
}).animate({
left:200,
top:-200
}, function () {
result.html(resultNum++)
}).animate({
left:50,
top:-450,
opacity:0.2
}, function () {
$(this).css({
left:0,
top:0,
opacity:0
})
})
},
function () {
span6.css({
background:"black",
opacity:1
}).animate({
left:300,
top:-150
}, function () {
result.html(resultNum++)
}).animate({
left:50,
top:-450,
opacity:0.2
}, function () {
$(this).css({
left:0,
top:0,
opacity:0
})
})
}
];
var queue;
var len=0;
var flag=0;
var timer;
input.on("keyup", function () {
var result=[];
var value=input.val();
len=value;
if(flag>=len){
clearInterval(timer);
}
if(value<6){
result =ani.slice(0,value);
queue=$.queue(box,"animate",result);
}else if(value>6){
var num1=Math.floor(value/6);
var num2=value%6;
for(var i=0;i<num1;i++){
result=result.concat(ani);
}
result=result.concat(ani.slice(0,num2));
console.log(result);
$.queue(box,"animate",result);
}
});
btnTrg.on("click", function () {
resultNum=0;
flag=0;
timer=setInterval(function () {
flag++;
console.log(flag);
$.dequeue(box,"animate");
},500);
})
</script>
</html>
总结
以上就是这篇文章的全部内容，感兴趣的朋友们自己运行操作下会更容易理解，如果有疑问可以留言交流，希望这篇文章对大家能有所帮助。
相关文章
重写了昨天的图片轮换，加入了自动切换效果，改变了布局，增强了可定制性，当然，还是有点小小的问题，在IE 6+,chrome,firfox3.68下测试正常运行2010-07-07
jQuery 1.9使用$.support替代$.browser的使用方法
jQuery 从 1.9 版开始，移除了 $.browser 和 $.browser.version ， 取而代之的是 $.support，下面我们来看下具体的使用方法2014-05-05
下面小编就为大家带来一篇利用浮层使select不可选的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦2016-12-12
这篇文章主要介绍了jQuery编程中的一些核心方法,jQuery是当下人气最高的JavaScript库,需要的朋友可以参考下2015-08-08
Ajax使用的关键对象是XmlHttpRequest对象，但是涉及到跨浏览器的的问题，所以，需要创建一个具兼容性的对象2011-04-04
jQuery实现中奖播报功能（让文本滚动起来） 简单设置数值即可
这篇文章主要介绍了jQuery实现中奖播报功能（让文本滚动起来） 简单设置数值即可,文中通过实例代码给大家详细介绍，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-03-03
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
从上篇文章，我们实现了Table分页代码的高效性，咱们继续沿着这个思路，探讨Table表格数据中另外一个很常见的排序问题。说到排序，我记得在asp.net中 GridView中提供了这样的方便，只需在展示字段上加上 Sorting 这样的属性，基本就完成了，剩下就是服务端cs代码的写法了。2010-01-01
如何实现提取元素里的纯文本，不包含span等里的内容，这就是本文要为大家介绍的重点，你将学会使用jquery来实现2013-09-09
下面小编就为大家带来一篇jQuery 选择同时包含两个class的元素的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
Jquery中的val(),text(),html()是对javascrip中的value、innerText、innerHtml三个属性的封装2011-01-01
最新评论