Javascript 箭头键上的div crossfade

我熟悉HTML/CSS，但对Javascript和jQuery还不熟悉，所以我一直被这个问题难住了

我正在尝试淡出包含图像的当前div，然后淡入下一个div，下面是一个示例 . 这将最终应用于Tumblr照片博客，因此我无法单独定位图像。

我尝试了几种不同的方法，下面的jQuery代码是我最接近的方法，但它仍然跳过div并卡住
非常感谢您的帮助：）

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>

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

$(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(); 
        });

});

jQuery:

<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>

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

$(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(); 
        });

});

---

您可以使用

indexNum--和indexNum++

在图像中导航。

感谢您的回复@Godinall，但此代码将当前图像的src交换为预定的src。我正在寻找一个交叉淡入淡出，将淡入以下div，而不单独针对它，因为图像将来自博客。这是我应该包含的html来澄清：

{block:Posts}{block:Photo}{/block:Photo}{/block:Posts}

好吧，我已经按照你的要求更新了我的演示。只需添加一个div，让div滑入即可。看这里的演示你让我编辑的演示工作了吗？通过chrome开发工具看代码，它似乎是.post的倍数。你说的.post的倍数是什么意思？你不是有3个投手吗？您可以通过js代码来控制它。它将所有post div放入一个数组并制作幻灯片。如果有问题，请告诉我.posts的数量实际上不是3，它是一个变量，通过Tumblr更新博客时会发生变化。我在js中添加了一个变量来解释这一点，但是google chrome dev工具显示，每次循环时，它都不会删除以前的div，因此会产生倍数。不知道你是如何编写js的，但这是我的更新，它会计算出你有多少篇文章，如果你需要的话，会动态更新