使用按钮开始 jquery 中的下一个动画
Start next animation in jquery using a button
我正在制作一个由一些 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" );
});
});
据我了解,您想按顺序为 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>
我正在制作一个由一些 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" );
});
});
据我了解,您想按顺序为 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>