javascript - 幻灯片 div。jQuery

Question

我正在使用此代码将 div 从屏幕上滑出：

       $('.box').click(function() {

            $(this).animate({
                 left: '-50%'
             }, 500, function() {
            $(this).css('left', '150%');
            $(this).appendTo('#container');
            });

            $(this).next().animate({
                 left: '50%'
            }, 500);
       });

html:

     <div id="container">

     <div id="box1" class="box">Div #1</div>
     <div id="box2" class="box">Div #2</div>
     <div id="box3" class="box">Div #3</div>


      </div>

css：.box {位置：绝对；左：150%；左边距：-25%；}

       #box1 {

         left: 50%;
       }

它工作得很好。但是当我点击最后一个 div 时，第一个又回来了，我可以再次遍历所有 div。

我希望它在最后一个 div 出现时停止。你能给我一些关于我如何做到这一点的提示吗？

谢谢您的帮助。

Answer 1

我想你正在寻找.one()

$('.box').one('click' , function() {

此外，更好的做法是缓存重复出现的选择器以减少查询DOM的次数

$('.box').one('click', function() {
    var $this = $(this);
    if (this.id !== 'box3') {
        $this.animate({
            left: '-50%'
        }, 500, function() {
            $this.css('left', '150%');
            $this.appendTo('#container');
        });

        $this.next().animate({
            left: '50%'
        }, 500);
    }
});​

检查小提琴