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/

动画出图像，将其附加到末尾，将其渐入淡入...无限重复

1 个答案: