Jquery animate: two divs, one exiting the screen, the other in

Question

I want to implement animation, the image has two divs

D1 | D2

First, D2 is on the screen (with 100% width), D1 is invisible (off the screen). I need animation, D2 moves to the right, off the screen. D1 moves from left to right, finally occupies the screen (replace D1).

If you saw how Groupon comes to life when you register a user, you can understand what I mean ...

Thank.

Answer 1

EDIT Good. I wanted to make a general decision (by animating the wrapper field). Clearer code and more customizable => http://jsfiddle.net/steweb/rWbFw/

Markup:

<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

---

- OLD -

- : 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});
});

Answer 2

jQuery timer plugin, localhost.

: 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>

, .

: , - ! - 4000 ( ) Chrome 10000 Fire Fox. Time Out , .