Запустите следующую анимацию в jquery с помощью кнопки - PullRequest
Новая
       22

Запустите следующую анимацию в jquery с помощью кнопки

1 голос
/ 04 марта 2020

Я делаю список (например, список воспроизведения), состоящий из нескольких элементов div. Каждый div с идентификатором, подобным segmentN, должен анимировать свойство width.

Div - это места в порядке (сегмент1, сегмент2, сегмент3 ...). Только 1 div должен быть анимирован за один раз, и следующий div должен анимировать, когда кнопка нажата, кроме того, если воспроизводится анимация, то должен остановиться.

Все div являются результатом al oop, поэтому мне нужно использовать одну и ту же jQuery -функцию для всех элементов div. Как я могу сделать это и запустить следующую анимацию при нажатии кнопки?

Вот код 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" );
  });
});

1 Ответ

0 голосов
/ 04 марта 2020

Насколько я понимаю, вы хотите анимировать divs по порядку. При каждом нажатии кнопки текущая анимация div должна останавливаться, а следующая должна начинаться.

Вы можете поддерживать текущий индекс div в одной переменной и увеличивать его при каждом нажатии. Обратите внимание, что для go с этим решением ваш 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>
...