.next(） 的奇怪行为和 jQuery 的简单幻灯片

我已经用这个用头撞墙几个小时了 - 没有运气。简而言之，我似乎无法从 next（） jQuery 方法中获得所需的功能。我正在尝试在单击图像时使 DOM 中的下一个 img 标签出现。

$(images).each(function(i){
    $('#images').append($(this).css({
        'display':(i) ? 'none' : 'in-line'
    }).click(function(){
        $(this).next().css({'display':'in-line'});
        $(this).css({'display':'none'});
    }));
});

所需的图像消失，但"next（）"图像不显示。有什么大创意？这是环境：

<div id="images">
    <img src="imgs/1.jpg" style="width: 333.33333333333337px; height: 500px; position: absolute; top: 50%; left: 50%; margin-top: -250px; margin-left: -166.66666666666669px; display: none; ">
    <img src="imgs/2.jpg" style="width: 333.3333333333333px; height: 500px; position: absolute; top: 50%; left: 50%; margin-top: -250px; margin-left: -166.66666666666666px; display: none; ">
    <img src="imgs/3.jpg" style="width: 333.3333333333333px; height: 500px; position: absolute; top: 50%; left: 50%; margin-top: -250px; margin-left: -166.66666666666666px; display: none; ">
    <img src="imgs/4.jpg" style="width: 333.3333333333333px; height: 500px; position: absolute; top: 50%; left: 50%; margin-top: -250px; margin-left: -166.66666666666666px; display: none; ">
    <img src="imgs/7.jpg" style="width: 500px; height: 333.3333333333333px; position: absolute; top: 50%; left: 50%; margin-top: -166.66666666666666px; margin-left: -250px; display: none; ">
</div>

这与这些元素是通过jQuery动态创建的事实有关吗？值得注意的是，动态创建的元素的迭代只有在加载图像后才会启动。

谢谢。