javascript - 动画图像输出，将其附加到结尾，淡入淡出......无休止地重复

Question

我正在创建一个关于图像的简单图像选取框。看起来很简单，但它不想按顺序制作动画。显示的代码确实有效。它隐藏了第一张图像并将其淡入其余图像之后，然后循环继续。然而，这并不是真正令人赏心悦目的第一张图片就消失了。

我很想使用我注释掉的动画。将第一个图像动画出来，将其附加到其余图像后面，然后淡入并根据需要重复该过程。然而，用动画替换 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>

JSFiddle(显示动画问题):http://jsfiddle.net/zmnLa3wq/5/

Answer 1

试试这个

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

http://jsfiddle.net/zmnLa3wq/32/