javascript - 每个循环中的 jQuery 动画都同时运行

Question

我尝试为 4 个元素设置动画，但不是每个元素都设置动画，所有元素都会同时设置动画。我什至尝试延迟动画，但仍然不起作用。

(function($){
  var options_position = $('#options').offset().top;
  var options_completed = false;
  var options_delay = 1000;
  //secondary options fire event to ascend pictures
  $(window).on('scroll', function(){
    var y_scroll_pos = window.pageYOffset;
    var scroll_pos_test = options_position;

    if((y_scroll_pos > scroll_pos_test) && !options_completed) {
      options_completed = true;

      $('#options-secondary .option').each(function(){
        $(this).animate({
          top: '-=160'
        },options_delay,function(){}).delay( 800 );
        //window.setTimeout(function(){}, 2000);
      });
      options_delay = options_delay + 600;
      console.log(options_delay);
      console.log(options_completed);
    }
  });
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="options">
<section id="options-secondary">
<div class="container">
	<div class="row">
		<div class="col-6 col-md-3">
			<div class="copy align-middle option" id="plans">
				<i class="fa fa-balance-scale rotate-360-hover" aria-hidden="true"></i>
				<h2>Test</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut nunc urna.</p>
			</div>
		</div>
		<div class="col-6 col-md-3">
			<div class="copy align-middle option" id="broker">
				<i class="fa fa-user-circle-o rotate-360-hover" aria-hidden="true"></i>
				<h2>Test</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut nunc urna.</p>
			</div>
		</div>
		<div class="col-6 col-md-3">
			<div class="copy align-middle option">
				<i class="fa fa-files-o rotate-360-hover" aria-hidden="true"></i>
				<h2>Test</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut nunc urna.</p>
			</div>
		</div>
		<div class="col-6 col-md-3">
			<div class="copy align-middle option">
				<i class="fa fa-shopping-basket rotate-360-hover" aria-hidden="true"></i>
				<h2>Test</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut nunc urna.</p>
			</div>
		</div>
	</div>
</div>
</section>
</div>

不知道如何让每个元素一个接一个地动画化，而不是同时动画化。

Answer 1

您可以创建一个函数来一次调用一个函数

(function($){
	var options_position = $('#options').offset().top;
	var options_completed = false;
	var options_delay = 1000;
	//secondary options fire event to ascend pictures
	$(window).on('scroll', function(){
		var y_scroll_pos = window.pageYOffset;
		var scroll_pos_test = options_position;

		if((y_scroll_pos > scroll_pos_test) && !options_completed) {
			options_completed = true;
oneByOne(0);
        
          function oneByOne(i) {
            $("#options-secondary .option")
              .eq(i)
              .animate(
                {
                  top: '-=160px'
                },
                function() {
                  if (i < 4) {
                    oneByOne(i + 1);
                  }
                }
              );
          }
	
        	options_delay = options_delay + 600;
        	console.log(options_delay);
        	console.log(options_completed);
    	}
	});
})(jQuery);

.option {
position:relative;
top:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="options">
<section id="options-secondary">
<div class="container">
	<div class="row">
		<div class="col-6 col-md-3">
			<div class="copy align-middle option" id="plans">
				<i class="fa fa-balance-scale rotate-360-hover" aria-hidden="true"></i>
				<h2>Test</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut nunc urna.</p>
			</div>
		</div>
		<div class="col-6 col-md-3">
			<div class="copy align-middle option" id="broker">
				<i class="fa fa-user-circle-o rotate-360-hover" aria-hidden="true"></i>
				<h2>Test</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut nunc urna.</p>
			</div>
		</div>
		<div class="col-6 col-md-3">
			<div class="copy align-middle option">
				<i class="fa fa-files-o rotate-360-hover" aria-hidden="true"></i>
				<h2>Test</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut nunc urna.</p>
			</div>
		</div>
		<div class="col-6 col-md-3">
			<div class="copy align-middle option">
				<i class="fa fa-shopping-basket rotate-360-hover" aria-hidden="true"></i>
				<h2>Test</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut nunc urna.</p>
			</div>
		</div>
	</div>
</div>
</section>
</div>