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将其包装在容器中，并使用position: absolute在div上使用top: 0。不要使用花车。
不要在点击处理程序中设置新的点击处理程序。这不会替换现有的单击处理程序，但会添加一个新的单击处理程序。因此，每次点击都会比前一次动画制作更多动画（并且可见效果in this case是动画开始前的延迟）。在现有的点击处理程序中使用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

使用jQuery使div水平滚动

1 个答案: