Question

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

这是我的小提琴：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添加了一个案例，向您展示确实显示了圆圈“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在线路中水平地动画六个图像

2 个答案: