使用jQuery使div水平滚动

Question

我正在尝试通过平滑地单击切换按钮来使内联div水平滚动，但是我不知道如何使它起作用： jsfiddle

这是我的代码：

   <button class="go">go</button>

<div class="right">right scroll</div>
<div class="left">left scroll</div>

jQuery的

$(function () {
    $('.go').on('click', function(){
        $('.left').animate({'left': '-105%'});
        $('.right').animate({'left': '0px'});
        $(this).toggleClass('return go');
        $('.return').bind('click', function(){
        $('.left').animate({'left': '0px'});
        $('.right').animate({'left': '105%'});
        $(this).toggleClass('return go');
    });
    });
});

的CSS

.left {
    min-width:100%;
    min-height:300px;
    background:red;
    position:relative;
    float:left;
    clear:right;
    left:0;
}
.right {
    min-width:100%;
    min-height:300px;
    background:blue;
    position:relative;
    right:-105%;
     float:left;
    clear:right;

}

Answer 1

不确定这是否是您想要的：

$(function () {
    $('a').on('click', function () {
        $('.left').animate({'left': '-105%'});
        $('.right').animate({'left': '0px'});
    });
});

http://jsfiddle.net/f7VdQ/3/

您无需设置元素的动画效果，只需设置其CSS。 另外，您在每次点击时都在链接上设置了另一个点击处理程序（我不知道为什么，所以将其删除了）。

---

关于您的更新/评论

• 要使div并排放置，请将它们包装在具有position: relative的容器中，并在div上使用position: absolute ， top: 0 。 不要使用浮点数。

• 不要在点击处理程序中设置新的点击处理程序。 那不会取代现有的点击处理程序，而是增加一个新的处理程序。 因此，每次点击所产生的动画要比前一次更多（ 在这种情况下 ，可见效果是动画开始之前的延迟）。 在现有的点击处理程序中使用if语句代替：

   $('a').on('click', function(){ if($('.left').css('left') == '0px') { $('.left').animate({'left': '-105%'}); $('.right').animate({'left': '0px'}); } else { $('.left').animate({'left': '0px'}); $('.right').animate({'left': '105%'}); }; }); 

  Working demo