Question

Here is my JSfiddle document:

http://jsfiddle.net/TSM_mac/xXcZx/1/

Basically, I am trying to make the second div slide in as the first div slides out.

I am having a problem with my CSS, the second div (because it is float: left) goes to the next line

The way to fix it would be to make sure that they always stay on the same line, but I cant figure this out :(.

Any suggestions?

Regards,

Taylor

Answer 1

Here is what I came up with: http://jsfiddle.net/wdm954/xXcZx/7/

I added a <div id="wrapper"> around your other DIVs with overflow:hidden and removed the styling from #container and set its width dynamically with jQuery.

$('#container').width(function() {
    return $('.page').width() * $('.page').length;
});

Since you have the .page class on each of your DIVs you can use use that instead of each ID.

$('#move').live('click', function () {
    $('.page').addClass('slideLeftOut');
});

I’m not sure if it was your intention but after the webkit keyframe animation was complete it was going back to the start (Object 1). If your intention was to have “Object 2” remain in view after the animation is complete then try this…

.slideLeftOut {
    -webkit-transition: -webkit-transform 4s linear;
    -webkit-transform: translateX(-100%);
}