<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 按钮(Button)插件加载状态</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<button id="fat-btn" class="btn btn-primary" data-loading-text="Loading..."
type="button"> 加载状态
</button>
<script>
$(function() {
$(".btn").click(function(){
$(this).button('loading').delay(1000).queue(function() {
$(this).button('reset');
//alert('123');
// $(this).dequeue();
});
});
});
</script>
注释掉dequeue依然会执行reset。
dequeue() 方法从队列中移除下一个函数,然后执行函数。
queue第一个会自动执行,如果你不掉用dequeue方法,那么剩余的任务就不执行了。
怎么说呢,反正就是第一个任务会自动执行,要执行后续动画需要调用dequeue。暂时先这样理解吧。
你可以在后续添加:this.animate({width:300},"slow");之类的动画,你就会发现,不调用dequeue是无法执行后续动画了