jquery - .动画({'left' : '0%' }); not working when attached to 3 divs?

Question

我有下面的代码，它在点击图像时在 div 之间滑动。

问题是，我希望能够像这样滑动:红色 > 绿色 > 蓝色，但目前我只能在红色和绿色 div 之间滑动。

谁能给我一些指导吗？

谢谢!

/* These are the individual divs which are scrolled through */
#left {
    min-width:100%;
    min-height:300px;
    background:red;
    position:absolute;
    top: 0;
    left:0;
}
#right {
    min-width:100%;
    min-height:300px;
    background:blue;
    position:absolute;
    top: 0; 
    right:-105%;
}
#middle {
    min-width:100%;
    min-height:300px;
    background:green;
    position:absolute;
    top: 0;
    right:-205%;
}

JS/JQuery:

<script>
    $(document).ready(function() {

    //Scroll all content to the left <---- this way
    $('#scrollRight').click(function(e) {  

            $('.container').animate({'left': '-105%'});             

        });

        //Scroll all content to the right ----> this way
    $('#scrollLeft').click(function(e) {  
    $('.container').animate({'left': '0%'});        

        });         

    //End document ready function.      
    });
    </script>

HTML:

<div class="container"> 
            <!-- You have to add the last div first, so that each div will get added after that...basically so that the div you wich to see first, is in first position -->

            <div id="right">right scroll</div>  
            <div id="middle">left scroll</div>          
            <div id="left">left scroll</div>

    </div>

这是 fiddle :

http://jsfiddle.net/45g3Le59/

Answer 1

所有三个 DIVS 同时进行动画处理，因此您只会看到两张幻灯片进行动画处理...在动画之间添加延迟。