I want to implement an animation, image there are two divs

D1 | D2

At first D2 is in screen(with 100% width), D1 is invisible(outside of screen). I want an animation that, D2 moves out to right, outside of screen. D1 moves from left to right, finally occupies the screen(replace D1).

If you saw how Groupon animate when register user, you may understand what I mean...

Thanks.

I want to implement an animation, image there are two divs

D1 | D2

At first D2 is in screen(with 100% width), D1 is invisible(outside of screen). I want an animation that, D2 moves out to right, outside of screen. D1 moves from left to right, finally occupies the screen(replace D1).

If you saw how Groupon animate when register user, you may understand what I mean...

Thanks.

• javascript
• jquery
• html
• animation

• jquery animate is what you need, and a bit of css – Val Commented Feb 17, 2011 at 11:48

2 Answers 2

EDIT Ok.. I wanted to make a general solution (by animating the wrapper margin). Clearer code and more customizable => http://jsfiddle/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 --

You could start with something like this: http://jsfiddle/steweb/dsHyf/

markup:

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

I have tried this with jQuery timer plugin & it is working very well with localhost.

You need to import : jQuery & jQuery Timer Plugin

And then just implement this :

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

And your HTML will be :

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

Enjoy & correct me if I am wrong.

EDIT : It seems the problem is still with Different browser ! The timeout should be 4000 (as it is set) for Chrome & 10000 for Fire Fox. Let me edit code to recognize browser & set Time Out later, very soon.