0

我正在尝试通过单击切换按钮平滑地使内联 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;

}
4

1 回答 1

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使用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

于 2013-05-21T16:08:06.953 回答