jQuery动画：两个div，一个移出屏幕，另一个移入

Question

我想实现一个动画效果，有两个div。

D1 | D2

一开始D2在屏幕内（100%宽度），D1在屏幕外不可见。 我想要一个动画效果，让D2向右移出屏幕。 D1从左边移动到右边，最终占据整个屏幕（取代D1）。

如果你看过Groupon注册用户时的动画，你可能会明白我的意思...

谢谢。

- Bin Chen

---

jQuery动画是您所需的，加上一点CSS。 - Val

Answer 1

编辑：好的，我想要制作一个通用的解决方案（通过动画包装器边距）。更清晰的代码和更可定制 => http://jsfiddle.net/steweb/rWbFw/ 标记：

<div id="mask">
    <div id="wrapper">
        <div class="full" id="div1">hey there I'm the first div</div>
        <div class="full" id="div2">hey there I'm the second div</div>
        <div class="full" id="div3">hey there I'm the third div</div>
        <!-- add as many 'full' divs as you want -->
    </div>
</div>

CSS：

#mask{
    width:100%;
    overflow:hidden;
    position:relative;
}
#wrapper{
    width:100%;
    height:300px;  /* optional! */
}
.full{
    float:left;
    height:300px;  /* optional! */
}
#div1{
    background:green;
}
#div2{
    background:white;
}
#div3{
    background:red;
}

JS：

var utils = {
    maskWidth : $('#mask').width(),
    currIndex : 0,
    setWidths : function(){
        //setting maskWidth
        utils.maskWidth = $('#mask').width();

        //setting wrapper width 
        $('#wrapper').css('width',$('.full').length * utils.maskWidth);

        //setting 'full div' width
        $('.full').each(function(index){
            $(this).css('width',utils.maskWidth);
        });

        //setting curr wrapper margin (for window resize)
        $('#wrapper').css('margin-left',-(utils.currIndex*utils.maskWidth));

    }
}

$('.full').click(function(){
    utils.currIndex = $(this).index()+1; //current elem index (for margin calc)
    if($(this).next().size() == 0){//if is the last, reset
        utils.currIndex = 0;
        $('#wrapper').animate({'margin-left':0});
    }else{ //animation, negative margin of the wrapper
        $('#wrapper').animate({'margin-left':-(utils.currIndex*utils.maskWidth)});
    }
});

$(window).resize(function() { //on resize, reset widths and margins
    utils.setWidths();
});

utils.setWidths(); //first time, set everything

---

-- NEW --

您可以从类似于以下链接的示例开始学习： http://jsfiddle.net/steweb/dsHyf/

标记：

<div id="wrapper">
    <div class="full" id="div1"></div>
    <div class="full" id="div2"></div>
</div>

CSS：

#wrapper{
    width:100%;
    overflow:hidden;
    position:relative;
    height:300px;
}
.full{
    position:absolute;
    width:100%;
    height:300px;
}
#div1{
    background:#FF0000;
    left:0px;
}
#div2{
    display:none;
    background:#FFFF00;
}

js:

$('#div2').css('left',-$('#wrapper').width()).show();

$('#div1').click(function(){
    $(this).animate({'left':$('#wrapper').width()});
    $('#div2').animate({'left':0});
});

$('#div2').click(function(){
    $(this).animate({'left':-$('#wrapper').width()});
    $('#div1').animate({'left':0});
});

- stecb

---

嗨 steweb！真是个不错的开发。我很欣赏，因为它没有依赖任何插件进行开发。这也是我尝试过但没成功的。但是，你应该加一些延迟吗？ - user284291

嗨@infoSetu..我很感激你喜欢它..你想在哪里看到延迟？用户点击=>延迟=>滑动？ - stecb

当然可以。你可能已经看到了我的代码，我正在使用计时器插件设置时间。它会稍微从左到右移动，然后再回来。如果你能让它更棒一些，那就太好了！谢谢。 - user284291

Answer 2

我已经使用jQuery定时器插件尝试过，它在本地工作非常好。

你需要导入：jQuery和jQuery Timer Plugin

然后只需实施这个：

<script type="text/javascript" src="jquery-1.5.js"></script>
        <script type="text/javascript" src="jquery.timers-1.2.js"></script>
        <script type="text/javascript">
            var i=0,j=100;
            $('#1').css('width',"0%");
            $('#2').css('width',"100%");
            l2r();
            function l2r(){
                var i=0,j=100;
                $(document).everyTime(2, function() {
                    i+=0.10;
                    $('#1').css('width',i+"%");
                    j -= 0.10;
                    $('#2').css('width',j+"%");
                }, 1000);
                setTimeout("r2l()", 4000);
            }
            function r2l(){
                var i=100,j=0;

                $(document).everyTime(2, function() {
                    i-=0.10;
                    $('#1').css('width',i+"%");
                    j += 0.10;
                    $('#2').css('width',j+"%");
                }, 1000);
                setTimeout("l2r()", 4000);
            }

你的 HTML 将会是：

        <div style='width:100%;'>
            <div id='1' style='background-color:#333333; height: 100px; float: left;'></div>
            <div id='2' style='background-color:#CCCCCC; height: 100px; float: right;'></div>
        </div>

欢迎指正我，如果我有错误的话。

编辑：看起来问题仍然出现在不同的浏览器上！Chrome 的超时时间应该是 4000（因为已经设置了），而 Fire Fox 的超时时间应该是 10000。让我稍后编辑代码以识别浏览器并设置超时时间，很快就会完成。

- user284291