jQuery/HTML - 水平滚动

Question

我在滚动时遇到问题...我想要做的是在单击一个按钮后，让一个 div 向左滚动，另一个向右滚动/一个出去，第二个。但我找不到任何解决方案，我'在强制第二个 div 靠近第一个并隐藏它时遇到问题......有什么想法吗？

Website

Answer 1

我已经阅读了您的问题，这是我所理解的；

您正在尝试使用另一个 div 为 div 设置动画，解决方案如下：

查看小提琴以获取工作示例：http://jsfiddle.net/HNY7R/

HTML

<div id="container">
    <div class="main"></div>
    <div class="second"></div>
</div>

<input type="button" id="push" value="push me" />

CSS

#container
{ width: 400px; height: 200px; position: relative; border:1px solid black; overflow: hidden; }

.main
{ width: 400px; height: 200px; position: absolute; left: 0; top: 0; background: green; }

.second
{ width: 400px; height: 200px; position: absolute; left: 400px; top: 0; background: red; }

jQuery

$('#push').click(function(){

        var main = $('.main').css('left');
        var second = $('.second').css('left');

        if(main == '-400px'){
            $('.second').animate({ 'left' : '400px' }, 500);
            $('.main').animate({ 'left' : '0px' }, 500);
        } else {
            $('.second').animate({ 'left' : '0px' }, 500);
            $('.main').animate({ 'left' : '-400px' }, 500);
        }


    });