Horizontal slide between two div

Question

I would like to create a slide beteween two divs when I click on a link.

I'm trying to do a slide like this : http://jsfiddle.net/jtbowden/ykbgT/2/

But this is a disaster : http://jsfiddle.net/Xroad/SP5Rh/

$('.slide').click(function() {

    $('.green').animate({
        left: '-50%'
    }, 500, function() {
        $('.red').css('left', '150%');
        $('.red').appendTo('#container');
    });

    $('.green').next().animate({
        left: '50%'
    }, 500);
});

Answer 1

This should fix it, i've changed the numbers a bit, to fix it for your box size.

$('.slide').click(function() {

    $("#container div:first").animate({
        left: '-150%'
    }, 500, function() {
        $(this).css('left', '150%');
        $(this).appendTo('#container');
    });

    $('#container div:first').next().animate({
        left: '0'
    }, 500);
});

EDIT: Why didn't yours work, compared to the working one? You were animating either red or green alone. Also, the other one has next() being used, but yours cannot have that because next() for your Slide div anchor is not what we want here.