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

i have created image animation with 3 image in which , initially only 1 image displayed then after animation of 1st image complete then same with second at a time only two image i have to display and if 3rd image come then i have to hide first image , i want this type of animation for all 6 images but i am stuck after 4th image , help me to resolve this or suggest me any other js that can make my work done.many thanks.

我创建了3幅图像的图像动画,其中,最初只显示1张图像,然后在第1张图像的动画完成后再与第二张图像相同,只有两张图像必须显示,如果第3张图像出现则我必须隐藏第一张图像,我想要所有6张图片的这种类型的动画,但我被困在第4张图片后,帮我解决这个问题或建议我任何其他可以让我的工作完成的js。非常感谢。

here is my fiddle : js fiddle

这是我的小提琴:js小提琴

Following is code :

以下是代码:

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); });

2 个解决方案

#1

Seems like a pain to add all that animation code for each element, especially if you decide to add more in the future. How about having a recursive function like this:

似乎很难为每个元素添加所有动画代码,特别是如果您决定在将来添加更多动画代码。如此具有这样的递归函数:

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

#2

I see that the code only handles first three circles (seconds 1-11). Further animation is provided by adding cases for later seconds.

我看到代码只处理前三个圆圈(秒1-11)。通过添加案例以供稍后的秒数提供进一步的动画。

Here is the fiddle that adds one case to show you that circle "4" is indeed displayed. But I believe it is upto you to make the final solution of it.

这是一个小提琴,增加了一个案例,向您展示确实显示了圆圈“4”。但我相信你应该做出最终的解决方案。

relevant code section is:

相关代码部分是:

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');
}