$(function () { var effect = function () { animateFlag = false; $('.box1').animate({ left: '+=100px' }, 1000); $('.box2').animate({ left: '+=100px' }, 1000, function () { animateFlag = true; }); }; var animateFlag = true; $('button').on('click', function () { if (animateFlag) { effect(); // console.log('animate执行后的值是:'+animateFlag); } }); });
<div class="test"> <button>go</button> <div class="box1 box"> <h1>lalalalalla</h1> </div> <div class="box2 box"> <h1>hahahahahha</h1> </div> </div>
* { margin: 0; padding: 0; } body { font: 12px/1.5 arail; } ul { list-style: none; } button { height: 2em; font-size: 14px; width: 4em; background: orange; color: #fff; border-radius: 3px; cursor: pointer; margin-bottom: 10px; border: 1px solid #eee; } .box { position: absolute; border: 1px solid orange; height: 40px; line-height: 40px; width: 160px; background: #eee; text-align: center; } .box2 { top: 120px; }