$(function () { var animateFlag = true; var clickCount = 1; var boxNumber = clickCount % 4; $('button').on('click', function () { if (animateFlag) { animateFlag = false; clickCount++; $('.box' + boxNumber).animate({ opacity: 'show' }, 300, function () { $('.box' + boxNumber).siblings().animate({ opacity: 'hide' }, function () { animateFlag = true; boxNumber = clickCount % 4; if (!boxNumber) { boxNumber = 4; clickCount = 0; } }); }); } }); });
<button>go</button> <p>快速点击go按钮,会出现所有的box都消失。但这并不符合我们的预期,因为每次的点击,我们只会让一个盒子显示,其它都隐藏。</p> <div class="test"> <div class="box1 box"> <h1>lalalalalla</h1> </div> <div class="box2 box"> <h1>hahahahahha</h1> </div> <div class="box3 box"> <h1>xixixixixixi</h1> </div> <div class="box4 box"> <h1>dididididdid</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; } .box3 { top: 200px; } .box4 { top: 280px; }