使用按钮开始 jquery 中的下一个动画

Question

我正在制作一个由一些 div 组成的列表（如播放列表）。每个 div，ID 像 segmentN 都必须为 width 属性.

设置动画

div 是按顺序排列的（segment1、segment2、segment3...）。一次只有 1 个 div 必须动画，下一个 div 必须动画，当按下按钮时，此外，如果动画正在播放，则必须停止。

所有 div 都是循环的结果，因此我需要对所有 div 使用相同的 jQuery 函数。当按下按钮时，我该怎么做和运行下一个动画？

这是 JSFiddle 代码：https://jsfiddle.net/bz9vn7c4/1/

HTML:

<div id="package_list">
  <div id="package1" class="package">
    <div id="segment1" class="type1 segment" value="200px">PKG1 TYPE1</div>
    <div id="segment2" class="type2 segment" value="300">PKG1 TYPE2</div>
    <div id="segment3" class="type1 segment" value="100">PKG1 TYPE1</div>
  </div>

  <div id="package2" class="package">
    <div id="segment4" class="type1 segment" value="400">PKG2 TYPE1</div>
  </div>

  <div id="package3" class="package">
    <div id="segment5" class="type1 segment" value="100">PKG3 TYPE1</div>
    <div id="segment6" class="type3 segment" value="200">PKG3 TYPE3</div>           
  </div>

  <div id="package4" class="package">
    <div id="segment7" class="type1 segment" value="150">PKG4 TYPE1</div>
    <div id="segment8" class="type2 segment" value="250">PKG4 TYPE2</div>
    <div id="segment9" class="type1 segment" value="100">PKG4 TYPE1</div>
  </div>
</div>

<div id="next_btn">[ BUTTON ]</div>

CSS:

.package_list {

}
.package {
    width: 100%;
}
.segment {
    display: inline-block;
}
.type1 {
    background-color: aqua;
    width: 100px;
    height: 100px;
}
.type2 {
    background-color: chartreuse;
    width: 100px;
    height: 100px;
}
.type3 {
    background-color: darkgoldenrod;
    width: 100px;
    height: 100px;
}

jQuery:

$(document).ready(function() {
  $("#next_btn").click(function(){
    $("#segment1").animate({width: "300px"}, 30000, "linear" );
  });
});

Answer 1

据我了解，您想按顺序为 divs 设置动画。每次单击当前动画的按钮 div 应该停止，下一个应该开始。

您可以在一个变量中维护运行 div 索引，并在每次点击时增加它。请注意，为了使用此解决方案，您的 div ids 必须符合模式。

$(document).ready(function() {
        var current_index=0;
        $("#next_btn").click(function(){
            if(current_index != 0){
                $("#segment" +current_index).stop();
            }
            current_index = current_index + 1;
            $("#segment" + current_index).animate({width: "300px"}, 30000, "linear" );
        });            
});

$(document).ready(function() {
      var current_index=0;
         $("#next_btn").click(function(){
                if(current_index != 0){
                 $("#segment" +current_index).stop();
                }
                current_index = current_index + 1;
       $("#segment" + current_index).animate({width: "300px"}, 30000, "linear" );
      });            
    });

.package_list {
 
}
.package {
 width: 100%;
}
.segment {
 display: inline-block;
}
.type1 {
 background-color: aqua;
 width: 100px;
 height: 100px;
}
.type2 {
 background-color: chartreuse;
 width: 100px;
 height: 100px;
}
.type3 {
 background-color: darkgoldenrod;
 width: 100px;
 height: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="package_list">
    <div id="package1" class="package">
     <div id="segment1" class="type1 segment" value="200px">PKG1 TYPE1</div>
     <div id="segment2" class="type2 segment" value="300">PKG1 TYPE2</div>
     <div id="segment3" class="type1 segment" value="100">PKG1 TYPE1</div>
    </div>

    <div id="package2" class="package">
     <div id="segment4" class="type1 segment" value="400">PKG2 TYPE1</div>
    </div>

    <div id="package3" class="package">
     <div id="segment5" class="type1 segment" value="100">PKG3 TYPE1</div>
     <div id="segment6" class="type3 segment" value="200">PKG3 TYPE3</div>   
    </div>

    <div id="package4" class="package">
     <div id="segment7" class="type1 segment" value="150">PKG4 TYPE1</div>
     <div id="segment8" class="type2 segment" value="250">PKG4 TYPE2</div>
     <div id="segment9" class="type1 segment" value="100">PKG4 TYPE1</div>
    </div>
   </div>
   
   <div id="next_btn">[ BUTTON ]</div>

使用按钮开始 jquery 中的下一个动画

Start next animation in jquery using a button

jquery

html

css

jquery-animate