针对以下html,编写代码使点击show按钮后 li逐个从左到右显示出来
<ul> <li >aaaaa</li> <li >bbbbb</li> <li >ccccc</li> <li >ddddd</li> </ul> <br style="clear: both;"> <input type="button" value="Show" id="showQueue"/>
#1.利用bind函数(bind和apply与call的区别:都可以达到偷换this的效果,但是apply和call是运行时偷换,而bind是绑定)
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
function exec2B(){
$(document).dequeue("colin");
}
function callback(){
this.animate({"left":0},"slow",exec2B);
}
$(function(){
$("ul li").each(function(idx){
var currentLi=$(this);
//使用bind,ECMAScript5中的新函数
$(document).queue("colin",callback.bind(currentLi));
});
$("#showQueue").click(function(){
exec2B();
});
});
</script>
#2 利用闭包
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
function exec2B(){
$(document).dequeue("colin");
}
$(function(){
$("ul li").each(function(idx){
var currentLi=$(this);
//利用闭包,缓存了currentLi
$(document).queue("colin",function(){
currentLi.animate({"left":0},"slow",exec2B);
});
});
$("#showQueue").click(function(){
exec2B();
});
});
</script>
本案例的知识点是jQuery queue和dequeue的用法,已经bind和闭包的相关应用。
原文:http://www.cnblogs.com/okBabyfaceBoy/p/3548163.html