Hi !

I'm trying to create a slide between two <ul> tags when I click on an image button.

Click on the "image button" at the top right corner to see : http://jsfiddle.net/Xroad/CnSEa/3/

$('#content-clients').css('left', '150%');

$('#btn-clients').click(function () {

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

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

I have a problem :

The first blue <ul> got by default a "left :150px". After a complete slide this element returns to "left:0".

I know that is in my code for both <ul> but how differentiate the position of the two <ul> ? I would like that my first blue <ul> returns to "left:150px;" but not the red <ul> (left:0 is ok).

Thank you in advance