Gallery Fader

by Chris Nicholson

HTML

<div>
<div></div>
<div style="display: none;"></div>
</div>
<a href="#">Next</a>

CSS

div div {
    position: absolute;
    top: 30px;
    left: 0;
    background: red;
    height: 300px;
    width: 300px;
    display: inline-block;
}

JavaScript

$(function(){
   
    $('a').click(function(e){
        e.preventDefault();
        
        $('div div').eq(0).animate({ 'left': '-20px', 'opacity': 0 }, 200, function(){
            $('div div').eq(0).hide();
            
            $('div div').eq(1).show();
            $('div div').eq(1).css({ 'opacity': 0, 'left': '20px' });
            $('div div').eq(1).animate({ 'opacity': 1, 'left': 0 }, 200);
            
        });
    });
    
});