JQuery 滑动 2 个 div

Question

我有 3 个 div 可以制作幻灯片。我想要的是能够点击一个 div 并让它循环两次。即，当单击 div #1 时，它会滚动到 div #2，继续，并停止在 div#3 .... 或单击 div #2 并使其平滑滚动两次并停止在 div #1

现在我只能让它滚动一次到下一个 div。

这里有 2 个 jsfiddle 示例，尽管我无法让它在 onclick 上滚动 2 个 div，但只有 1 个。

http://jsfiddle.net/jtbowden/ykbgT/2/ http://jsfiddle.net/jtbowden/ykbgT/

这是我的 HTML:

<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

body {
padding: 0px;    
}

#container {
position: absolute;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;  
}

.box {
position: absolute;
width: 50%;
height: 300px;
line-height: 300px;
font-size: 50px;
text-align: center;
border: 2px solid black;
left: 50%;
top: 100px;
margin-left: -25%;
}

#box1 {
background-color: green;
left: -150%;
}

#box2 {
background-color: yellow;
}

#box3 {
background-color: red;
left: 150%;
}

和JS:

$('.box').click(function() {
$('.box').each(function() {
    if ($(this).offset().left < 0) {
        $(this).css("left", "150%");
    } else if ($(this).offset().left > $('#container').width()) {
        $(this).animate({
            left: '50%',
        }, 500 );
    } else {
        $(this).animate({
            left: '-150%',
        }, 500 );
    }
});
});

Answer 1

http://jsfiddle.net/ykbgT/8195/

var anim = false; //prevent animaton before end, on more clicks
var numCycle = 2; //number of  cycle, can be changed at will

$('.box').click(function () {
    if (anim == false) animateD($(this), 1)
});

function animateD($d, count) {
    anim = true;

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

    $d2 = $d.next();
    $d2.animate({
        left: '50%'
    }, 500, function () {
        if (count < numCycle) {
            count++;
            animateD($d2, count)
        } else {
            count = 0;
            anim = false;
        }
    });
}