Javascript 为图像设置动画，将其附加到结尾，然后将其淡入。。。没完没了地重复

我正在创建一个关于图像的简单图像字幕。看起来很简单，但是它不想按顺序制作动画。显示的代码确实有效。它隐藏第一个图像并在其余图像后面淡入淡出，循环继续。然而，这并不是真正的赏心悦目，因为第一个图像刚刚消失

我很想使用我评论过的动画。设置第一幅图像的动画，将其附加到其余图像的后面，然后将其淡入，并根据需要重复该过程。但是，用动画替换hide（）会使图像先附加，然后滑动/淡出，然后以错误的顺序淡出

在我的事件序列中是否有我做错的事情，或者如何让它正常工作

<script type="text/javascript">
$(document).ready(function() {


    function doSilver() {
        image = $('.str3 .inline-image:first');
        console.log(image.attr('src'));
        image.hide().appendTo('.str3').css('display','hidden').fadeIn();
        //$('.str3').append(image);

        //$(image).animate({ height: 'toggle', opacity: 'toggle' }, 'slow');
    }

    setInterval(doSilver, 5000);

});
</script>

$（文档）.ready（函数（）{
功能剂量计（）{
image=$（'.str3.inline image:first'）；
console.log（image.attr（'src'））；
image.hide（）.appendTo（'.str3'）.css（'display'，'hidden'）.fadeIn（）；
//$（'.str3'）。追加（图像）；
//$（图像）.animate（{height:'toggle'，opacity:'toggle'}，'slow'）；
}
设定间隔（剂量器，5000）；
});

JSFIDLE（显示动画问题）：

试试这个

<script type="text/javascript">
$(document).ready(function() {


    function doSilver() {
        image = $('.str3 .inline-image:first').parent();
        console.log(image.attr('src'));
        image.fadeOut(1200);
        setTimeout(function(){image.appendTo('.str3').fadeIn(1200)},1200);
    }

    setInterval(doSilver, 5000);

});
</script>

$（文档）.ready（函数（）{
功能剂量计（）{
image=$（'.str3.inline image:first'）.parent（）；
console.log（image.attr（'src'））；
图像衰减（1200）；
setTimeout（函数（）{image.appendTo（'.str3'）.fadeIn（1200）}，1200）；
}
设定间隔（剂量器，5000）；
});