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

Posted

技术标签:

【中文标题】Jquery在行路径中水平动画六个图像【英文标题】：Jquery Animate six image horizontally in line path 【发布时间】：2016-02-22 12:33:03 【问题描述】：

我已经创建了带有 3 个图像的图像动画，其中最初只显示 1 个图像，然后在第一个图像的动画完成后与第二个图像相同，一次只有两个图像我必须显示，如果第三个图像出现，那么我必须隐藏第一张图片，我想要所有 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); );

【问题讨论】：

在此处粘贴相关代码。 @YeldarKurmangaliyev 这里是代码，见已编辑。 【参考方案1】：

为每个元素添加所有动画代码似乎很痛苦，特别是如果您决定将来添加更多。有一个这样的递归函数怎么样：

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

我看到代码只处理前三个圆圈（第 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');

【讨论】：

问题是当我为图像 4 、 5 6 添加更多左侧样式属性时，我无法弄清楚如何处理其他圆圈，它把所有东西都混在一起了。 在我看来，您的代码中的 if-else 更像是一条时间线。每隔 x 秒，就会渲染一个动画。现在你如何去做是参考前三个圆圈动画的代码。我想提供一个完整的解决方案并不是您对我们的期望。 @Sona 另一件值得一提的是过度滚动的问题。图像的宽度和动画所需的空间约为 350 像素。所以你在看 2100px 宽度.. 对吗？ 不，我只想要 350 像素的所有 6 张图像，我想像以下顺序一样一张一张地显示所有图像，如 (a) 1(b) 1,2 (c) 2,3 (d ) 3,4 (e)4,5 (f)5,6，最后只有 1,2,3

以上是关于Jquery在行路径中水平动画六个图像的主要内容，如果未能解决你的问题，请参考以下文章

jQuery 动画图像交换

如何在jquery中水平滚动textarea？

使用jQuery在区域中水平滚动[重复]

如何在 JavaScript 中水平翻转图像

iPhone UIImageView 在 UIScrollView 中水平滚动 - 中心图像？

如何在 PyQt5 中水平对齐中心图像？