使用jQuery.queue() 多个元素依次出现

平日学习点滴

//use jQuery

<script type="text/javascript">
$(function() {
varjsonData = [{
cont: "加油！",
name: "guest"
}, {
cont: "加油！！",
name: "guest"
}, {
cont: "加油！！！",
name: "guest"
}];
$.each(jsonData, function(index, item) {
//解析添加DOM
$("#content").append("<span>"+ item.cont + "By:"+ item.name + "</span>").find('span').hide();
});
//队列数组，按顺序依次执行
//可以在此自定义效果
varqueue_list = [
function(){$("#content").find('span:eq(0)').fadeIn(200, _next);},
function(){$("#content").find('span:eq(1)').fadeIn(200, _next);},
function(){$("#content").find('span:eq(2)').fadeIn(200, _next);},
function(){$("#content").find('span:eq(0)').fadeOut(200, _next);},
function(){$("#content").find('span:eq(1)').fadeOut(200, _next);},
function(){$("#content").find('span:eq(2)').fadeOut(200, run);},
];
//执行下一个队列
var_next = function() {
$("#content").dequeue('_fx');
}
//执行第一个队列
varrun = function(){
$("#content").queue('_fx', queue_list).dequeue('_fx');
};
//run
run();
});
</script>

转载于:https://blog.51cto.com/snowdream/1348600