时间戳

首页 > 解决方案 > 每个函数都不适用于使用 jQuery 的 setTimeout 属性？

javascript - 每个函数都不适用于使用 jQuery 的 setTimeout 属性？

问题描述

我有four boxes我想从左边一一来。但这是一起来的。我该如何解决这个问题？

我尝试了什么： -

	$('.box').each(function(){
		var $this = $(this);
	setTimeout(function(){
			$this.addClass('unbox')
	},1000 );
	});
.box{height:100px; width:100px; background:black; float:left; margin:10px; transform:translateX(-500px); transition:all 0.45s;}
.unbox{transform:translateX(0px); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

答案将不胜感激！

标签： javascriptjqueryhtmlcss

解决方案

给每个盒子一个逐渐变长的超时时间。.each将索引作为第一个参数传递给其回调，您可以将超时延迟基于：

	$('.box').each(function(i){
		var $this = $(this);
	setTimeout(function(){
			$this.addClass('unbox')
	},(i + 1) * 1000 );
	});
.box{height:100px; width:100px; background:black; float:left; margin:10px; transform:translateX(-500px); transition:all 0.45s;}
.unbox{transform:translateX(0px); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

推荐阅读