div交叉淡入淡出箭头键

Question

I'm familiar with HTML/CSS but am new to the world of Javascript and jQuery, so I've been stumped on this problem.

I'm trying to fade out the current div which contains an image, and fade in the div that is directly next, here is an example . This will be eventually applied to a Tumblr photo blog so I can't target the images individually.

I've tried several different methods and the jQuery code below is the one that I've come closest with however it still skips divs and gets stuck.
All help is greatly appreciated :)

HTML:

<div class="content">
    <div class="post"><img src="1.jpg" alt="1"></div>
    <div class="post"><img src="2.jpg" alt="2"></div>
    <div class="post"><img src="3.jpg" alt="3"></div>
</div>

CSS:

.post{
    position: absolute;
    width: 480px;
    height: auto;
    top: 120px;
    left: 50%;
    margin-left: -240px;
    display: none;
}

jQuery:

$(document).ready(function(){

        $(document).keydown(function(e) {
            switch(e.which) {

                case 37: // left
                        $('.post').fadeOut().prev().fadeIn();
                break;

                case 39: // right
                        $('.post').fadeOut().next().fadeIn();                                   
                break;

             default: return; 
            }
             e.preventDefault(); 
        });

});

Answer 1

See a working demo here

You could use indexNum-- and indexNum++ to navigate through images.