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％; margin-left：-25％; }

       #box1 {

         left: 50%;
       }

效果很好。但是当我点击最后一个div时，第一个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);
    }
});

<强> Check Fiddle

滑动div。 jQuery的

1 个答案: