Question

I have set up just some basic panels that I’m trying to slide in and out horizontally. What I’m trying to do hide all of the content except the first panel when the page loads, and then when a link to the other panels is clicked the currently displayed content will slide left to be hidden and then the new content will slide into the center of the page, and so on. At the moment, the positioning of the boxes I have aren’t cooperating with me.

Demo can be checked out here:

http://jsfiddle.net/fE8ks/

Thanks!

Answer 1

Do you really need to position elements with margin to the left? Because if it works for you to simply hide them, the code which does your effect is pretty simple:

$(document).ready(function() {
$('#container').css({position:'relative'});
    $("#container div:not(:first)").hide();
    $('.div1').addClass('current');
    $("nav a").click(function() {
        var cls = this.name;
        $('.current').removeClass('current').animate( { width: "hide", paddingLeft: "hide", paddingRight: "hide", marginLeft: "hide", marginRight: "hide" }, 500, function() {
            $('.'+cls).addClass('current').animate( { width: "show", paddingLeft: "show", paddingRight: "show", marginLeft: "show", marginRight: "show" }, 500);
        });
        return false;
    });
});

I’ve also put this version to your Fiddle: http://jsfiddle.net/fE8ks/1/