Jquery 在直线路径中水平动画六个图像

Question

我已经用 3 张图片创建了图片动画，其中最初只显示了 1 张图片，然后在第一张图片的动画完成之后与第二张图片相同，一次只显示两张图片，如果出现第三张图片，那么我有要隐藏第一张图片，我想要所有 6 张图片都使用这种类型的动画，但我在第 4 张图片之后卡住了，请帮助我解决这个问题或建议我任何其他可以让我工作的 js done.many 谢谢。

这是我的 fiddle：js fiddle

代码如下：

HTML

 <div style="float:left;position: relative;left: 300px" id="b">
    <img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/top_chart_track_number_one-128.png" class="image1">
</div>
<div style="float:left;position: relative;display: none;" id="b1">
    <img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/track_number_two_circle-128.png" class="image2">
</div>
<div style="float:left;position: relative;display: none;" id="b2">
    <img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/three_top_chart_track-128.png" class="image3">
</div>
<div style="float:left;position: relative;display: none;" id="b3">
    <img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/top_number_four_track_chart_circle-128.png" class="image3">
</div>
<div style="float:left;position: relative;display: none;" id="b4">
    <img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/top_five_chart_track_list-128.png" class="image3">
</div>
<div style="float:left;position: relative;display: none;" id="b5">
    <img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/number_six_circle_chart_list_track-128.png" class="image3">
</div>

JS

$(document).ready(function() {
    $("#b").animate({left: "-=300"},2000);
        $("#b").animate({left: "+=80"}, 1000);
var counter = 1;
setInterval(function()
{
    ++counter;
    console.log(counter);
    if(counter=='2')
    {

    }
    else if(counter=='7')
    {
      $("#b").animate({left: "-=80"},1000); 
    }
    else if(counter=='4')
    {
        $("#b1").fadeIn('slow');
        $("#b1").animate({left: "+=300"},2000);
        $("#b1").animate({left: "-=280"}, 1000);
    }
    else if(counter=='8')
    {
        console.log('enter');
        $("#b2").fadeIn('slow');
        $("#b2").animate({left: "+=300"},2000);
        $("#b2").animate({left: "-=500"}, 1000);
    }
    else if(counter=='11')
    {
        console.log('enter');
        $("#b").animate({left: "-=300"}, 1000);
        $("#b1").animate({left: "-=260"}, 1000);
        $("#b2").animate({left: "-=0"}, 1000);
        //$("#b").hide('1000');
    }
}, 1000); });

Answer 1

我看到代码只处理前三个圆圈（第 1-11 秒）。通过为稍后的几秒添加案例来提供进一步的动画。

这里fiddle加了一个case，告诉你确实显示了圆圈“4”。但我相信最终的解决方案还是要靠你。

相关代码段为：

else if (counter == '14') {
    console.log('enter 14');
    $("#b3").fadeIn('slow');
    $("#b").animate({
        left: "0"
    }, 1000);
    $("#b1").animate({
        left: "30"
    }, 1000);
    $("#b2").animate({
        left: "60"
    }, 1000);
    $("#b3").animate({
        left: "200"
    }, 1000);
    //$("#b").hide('1000');
}

Answer 2

为每个元素添加所有动画代码似乎很痛苦，尤其是当您决定在将来添加更多内容时。像这样的递归函数怎么样：

$(document).ready(function () {
    var $first = $('.number').first();
    slider($first, true);
    
    function slider($first, firstPass) {
        var $second = $first.next();
        var $third = $second.next();

        if (firstPass) {
            $first.fadeIn('slow');
            $first.animate({ left: "0" }, 2000, function () {
                $first.animate({ left: "80px" }, 1000, function () {
                    loop();
                });
            });
        } else {
            loop();
        }

        function loop() {
            $second.css('left', '120px').fadeIn('slow');
            $second.animate({ left: "400px" }, 2000, function () {
                $first.delay(500).animate({ left: "0" }, 1000);
                $second.animate({ left: "150px" }, 1000, function () {
                    // If there is no third element, we can stop here.
                    if ($third.length > 0) {
                        $third.css('left', '250px').fadeIn('slow');
                        $first.delay(2500).animate({ left: "-600px" }, 1000, function () {
                            $first.fadeOut();
                        });
                        $second.delay(3000).animate({ left: "-300px" }, 1000, function () {
                            $second.fadeOut();
                        });
                        $third.animate({ left: "550px" }, 2000, function () {
                            $third.animate({ left: "80px" }, 1000, function () {
                                // Start again and set the third element as the new first.
                                slider($third, false);
                            });
                        });
                    }
                    
                });
            });
        }
    }
});

.number {
    position: absolute;
    display: none;
}

#b {
    left: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="number" id="b">
    <img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/top_chart_track_number_one-128.png" class="image1">
</div>
<div class="number" id="b1">
    <img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/track_number_two_circle-128.png" class="image2">
</div>
<div class="number" id="b2">
    <img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/three_top_chart_track-128.png" class="image3">
</div>
<div class="number" id="b3">
    <img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/top_number_four_track_chart_circle-128.png" class="image3">
</div>
<div class="number" id="b4">
    <img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/top_five_chart_track_list-128.png" class="image3">
</div>
<div class="number" id="b5">
    <img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/number_six_circle_chart_list_track-128.png" class="image3">
</div>

Jquery 在直线路径中水平动画六个图像

Jquery Animate six image horizontally in line path

javascript

jquery

animation

image

jquery-animate