使用按钮在jquery中启动下一个动画

我正在制作一个由一些div组成的列表（比如播放列表）。每个ID类似于

segmentN

的div都必须设置

width

属性的动画

div是按顺序排列的位置（段1、段2、段3…）。一次只能为1个div设置动画，当按下按钮时，下一个div必须设置动画，而且如果正在播放动画，则必须停止

所有div都是循环的结果，因此我需要对所有div使用相同的jQuery函数。按下按钮时，如何执行该操作并运行下一个动画

以下是JSFIDLE代码：

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>

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

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

jQuery：

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

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

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

---

根据我的理解，您希望按顺序设置

divs

的动画。在每次点击按钮时，当前正在设置动画的div应该停止，下一个应该开始

您可以在一个变量中维护正在运行的div索引，并在每次单击时增加它。请注意，为了使用此解决方案，您的

div id

必须处于模式中

$(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" );
        });            
});

$（文档）.ready（函数（）{
var当前_指数=0；
$（“#下一步”）。单击（函数（）{
如果（当前_索引！=0）{
$（“#段”+当前#索引）.stop（）；
}
当前指数=当前指数+1；
$（“#段”+当前#索引）。动画（{宽度：“300px”}，30000，“线性”）；
});            
});
.package\u列表{
}
.包裹{
宽度：100%；
}
.部分{
显示：内联块；
}
.type1{
背景色：浅绿色；
宽度：100px；
高度：100px；
}
.类型2{
背景色：黄绿色；
宽度：100px；
高度：100px；
}
.类型3{
背景颜色：暗金色；
宽度：100px；
高度：100px；
}

PKG1类型1
PKG1类型2
PKG1类型1
PKG2类型1
PKG3类型1
PKG3类型3
PKG4类型1
PKG4类型2
PKG4类型1
[按钮]
根据我的理解，您希望按顺序设置
div的动画。在每次点击按钮时，当前正在设置动画的div应该停止，下一个应该开始

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

$(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" );
        });            
});


$（文档）.ready（函数（）{
var当前_指数=0；
$（“#下一步”）。单击（函数（）{
如果（当前_索引！=0）{
$（“#段”+当前#索引）.stop（）；
}
当前指数=当前指数+1；
$（“#段”+当前#索引）。动画（{宽度：“300px”}，30000，“线性”）；
});            
});
.package\u列表{
}
.包裹{
宽度：100%；
}
.部分{
显示：内联块；
}
.type1{
背景色：浅绿色；
宽度：100px；
高度：100px；
}
.类型2{
背景色：黄绿色；
宽度：100px；
高度：100px；
}
.类型3{
背景颜色：暗金色；
宽度：100px；
高度：100px；
}

PKG1类型1
PKG1类型2
PKG1类型1
PKG2类型1
PKG3类型1
PKG3类型3
PKG4类型1
PKG4类型2
PKG4类型1
[按钮]
是！这正是我想要的——非常感谢你的帮助！我很高兴这有帮助。是的！这正是我想要的——非常感谢你的帮助！我很高兴这有帮助。