0

私はこのコードを使用して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をもう一度確認できます。

最後のdivが表示されたら停止します。それをどのように達成できるかについてのヒントを教えてください。

ご協力ありがとうございました。

4

1 に答える 1

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);
    }
});​

フィドルをチェック

于 2012-12-14T17:09:05.220 に答える