How can I get images to slide out of view?

Question

I am new to jquery and am attempting to create a simple rotating gallery with additional buttons to go to previous and next images.

At the moment it works well, but I would like to add an effect to slide the top image out first before removing its class.

This is what I have so far:

index

<div id="container">
<img src="pic1.png" id="pic1" class="top-pic" alt="" />
<img src="pic2.png" id="pic2" alt="" />
<img src="pic3.png" id="pic3" alt="" />
<img src="pic4.png" id="pic4" alt="" />
</div>

<input type="button" name="prev" id="prev" value="prev" />
<input type="button" name="next" id="next" value="next" />

css

#container{
    position:relative;
    height:200px;
    width:400px;
}
    #container img{
        position:absolute;top:0;left:0;
        height:200px;
        width:400px;
    }
    .top-pic{
        z-index:999;
    }

jquery

$('#next').click(function(){
    if($('#pic1').hasClass('top-pic')){
        $('#pic1').removeClass('top-pic');
        $('#pic2').addClass('top-pic');
        $('#pic2').animate({right:800}, {duration: 'slow', easing: 'easeOutQuad'})
    }else if($('#pic2').hasClass('top-pic')){
        $('#pic2').removeClass('top-pic');
        $('#pic3').addClass('top-pic');
    }else if($('#pic3').hasClass('top-pic')){
        $('#pic3').removeClass('top-pic');
        $('#pic4').addClass('top-pic');
    }else if($('#pic4').hasClass('top-pic')){
        $('#pic4').removeClass('top-pic');
        $('#pic1').addClass('top-pic');
    }

});

$('#prev').click(function(){
    if($('#pic1').hasClass('top-pic')){
        $('#pic1').removeClass('top-pic');
        $('#pic4').addClass('top-pic');
    }else if($('#pic4').hasClass('top-pic')){
        $('#pic4').removeClass('top-pic');
        $('#pic3').addClass('top-pic');
    }else if($('#pic3').hasClass('top-pic')){
        $('#pic3').removeClass('top-pic');
        $('#pic2').addClass('top-pic');
    }else if($('#pic2').hasClass('top-pic')){
        $('#pic2').removeClass('top-pic');
        $('#pic1').addClass('top-pic');
    }

});

function rotate(){
    setInterval(function(){
        if($('#pic1').hasClass('top-pic')){
        $('#pic1').removeClass('top-pic');
        $('#pic2').addClass('top-pic');
        $('#pic2').animate({right:800}, {duration: 'slow', easing: 'easeOutQuad'})
    }else if($('#pic2').hasClass('top-pic')){
        $('#pic2').removeClass('top-pic');
        $('#pic3').addClass('top-pic');
    }else if($('#pic3').hasClass('top-pic')){
        $('#pic3').removeClass('top-pic');
        $('#pic4').addClass('top-pic');
    }else if($('#pic4').hasClass('top-pic')){
        $('#pic4').removeClass('top-pic');
        $('#pic1').addClass('top-pic');
    }
    }, 4000);
}
rotate();

So when images switch classes I would like the top image to slide side ways out of view first? But how do I do this?

Here is a working example of the image rotator (ignore the livesearch): http://chrismepham.com/sites/test/livesearch.html

Answer 1

I created a very simple example for you to look at here .

basically a viewport div limits the user to see only the image you present to them, but a imageContainer div holds a horizontal list of images for you to scroll left and right

If you have any questions please comment.