27-解决方案

7.6.2　解决方案

在这个解决方案中，我打算包含一些调试信息，所以我包含了一个ID为 debug 的 <div> 元素，并将在这个元素上附加日志信息，帮助我们查看发生的情况。

将使用自定义jQuery选择器 :animated 测试动画是否运行：

$(document).ready(function () {
　 var speed = 100;
　 $('#animate').click(function () {
　　　$('.box')
　　　　 .filter(':not(:animated)')
　　　　 .animate({ marginLeft: −10 }, speed, function () {
　　　　　　$('#debug').append('<p>Starting animation.<p>');
　　　　 })
　　　　 .animate({ marginLeft: 10 }, speed)
　　　　 .animate({ marginLeft: −10}, speed)
　　　　 .animate({ marginLeft: 10 }, speed)
　　　　 .animate({ marginLeft: −10}, speed)
　　　　 .animate({ marginLeft: 10 }, speed)
　　　　 .animate({ marginLeft: 0}, speed, function () {
　　　　　　$('#debug').append('<p>Finished animation.</p>');
　　　　 }); //长方法链结束
　　　});
　 });