如何设置元素一个接一个显示的持续时间

时间：2018-04-11 14:03:53

标签： javascript jquery css css3 each

我试图让public class Test { public Integer num = 1; public void change(Integer n) { n = null; } public void print() { System.out.println(num); } public static void main(String[] args) { Test test = new Test(); test.change(test.num); test.print(); } } 个元素依次淡入淡出。我正在使用solutionBlock函数来做到这一点，但我的尝试并不是很好。

下面的代码段中有三张图片。由于duration功能，第一个未显示。

我做错了什么？

next
$('.solutionBlock').each(function(index) {
			$(this).delay(500*index).next().addClass('active');
});
.solutionBlock {
	width: 25%;
	height: 40vh;
	display: inline-block;
	vertical-align: top;
	overflow: hidden;
	box-sizing: border-box;
	border-bottom: 2px solid #FFF;
	border-right: 2px solid #FFF;
	position: relative;
	cursor: pointer;
	opacity: 0;
}
.solutionBlock.active {
	opacity: 1;
	-webkit-transition: all .35s ease;transition: all .35s ease;
}
.solutionBlock .overlay {
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.3);
	z-index: 1;
	-webkit-transition: all .35s ease;transition: all .35s ease;
	top: 0;
	left: 0;
	right: 0;
	position: absolute;
}
.solutionBlock:hover .overlay {
	background-color: rgba(0,0,0,0.0);
	-webkit-transition: all .35s ease;transition: all .35s ease;
}
.solutionBlock:hover img {
	-webkit-transform: scale(1.1);transform: scale(1.1);
	-webkit-transition: all .35s ease;transition: all .35s ease;
}
.solutionBlock img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-transition: all .35s ease;transition: all .35s ease;
}
.sBlockTitle {
	font-size: 1.4rem;
	font-family: 'Muli', sans-serif;
	line-height: 1.4em;
	color: #FFF;
	padding: 0 20px;
	font-weight: 800;
	text-shadow: 2px 2px #242424;
}

2 个答案:

答案 0 :(得分：4)

好吧，如果这是你想要的。我会这样做的：）

你显然非常接近你想要达到的目标。但是您需要将active类添加到包含solutionBlock的元素，以使其next()处于活动状态，而不会在您的法庭上执行操作。那么，这就是你如何做到的

$('.solutionBlock').each(function(index) {
 setTimeout(()=>{
       $(this).addClass("active");
   }, 500*index);
			 
});
.solutionBlock {
	width: 25%;
	height: 40vh;
	display: inline-block;
	vertical-align: top;
	overflow: hidden;
	box-sizing: border-box;
	border-bottom: 2px solid #FFF;
	border-right: 2px solid #FFF;
	position: relative;
	cursor: pointer;
	opacity: 0;
}
.solutionBlock.active {
	opacity: 1;
	-webkit-transition: all .35s ease;transition: all .35s ease;
}
.solutionBlock .overlay {
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.3);
	z-index: 1;
	-webkit-transition: all .35s ease;transition: all .35s ease;
	top: 0;
	left: 0;
	right: 0;
	position: absolute;
}
.solutionBlock:hover .overlay {
	background-color: rgba(0,0,0,0.0);
	-webkit-transition: all .35s ease;transition: all .35s ease;
}
.solutionBlock:hover img {
	-webkit-transform: scale(1.1);transform: scale(1.1);
	-webkit-transition: all .35s ease;transition: all .35s ease;
}
.solutionBlock img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-transition: all .35s ease;transition: all .35s ease;
}
.sBlockTitle {
	font-size: 1.4rem;
	font-family: 'Muli', sans-serif;
	line-height: 1.4em;
	color: #FFF;
	padding: 0 20px;
	font-weight: 800;
	text-shadow: 2px 2px #242424;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="solBlocks">
			<div class="solutionBlock ">
				<div class="overlay  "></div>
				<img src="http://via.placeholder.com/300" alt="A">
				<div class="total-center front">
					<h2 class="sBlockTitle">A</h2>
				</div>
			</div>
      <div class="solutionBlock">
				<div class="overlay"></div>
				<img src="http://via.placeholder.com/300" alt="B">
				<div class="total-center front">
					<h2 class="sBlockTitle">B</h2>
				</div>
			</div>
      <div class="solutionBlock">
				<div class="overlay"></div>
				<img src="http://via.placeholder.com/300" alt="C">
				<div class="total-center front">
					<h2 class="sBlockTitle">C</h2>
				</div>
			</div>
</section>

答案 1 :(得分：1)

你必须遇到问题：

1）.next()：

  

获取匹配元素集中每个元素的紧随其后的兄弟。如果提供了选择器，则仅当它与该选择器匹配时，它才会检索下一个兄弟。

这就是为什么它不适用于第一个元素（它会将addClass添加到下一个元素......即：第二个元素）

2）如this回答

所示
  

您不能直接延迟addClass调用

可能的解决方案是：

$(this).delay(500*index).queue(function(){$(this).addClass('active')});


$('.solutionBlock').each(function(index) {
  $(this).delay(500*index).queue(function(){$(this).addClass('active')});
});
.solutionBlock {
	width: 25%;
	height: 40vh;
	display: inline-block;
	vertical-align: top;
	overflow: hidden;
	box-sizing: border-box;
	border-bottom: 2px solid #FFF;
	border-right: 2px solid #FFF;
	position: relative;
	cursor: pointer;
	opacity: 0;
}
.solutionBlock.active {
	opacity: 1;
	-webkit-transition: all .35s ease;transition: all .35s ease;
}
.solutionBlock .overlay {
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.3);
	z-index: 1;
	-webkit-transition: all .35s ease;transition: all .35s ease;
	top: 0;
	left: 0;
	right: 0;
	position: absolute;
}
.solutionBlock:hover .overlay {
	background-color: rgba(0,0,0,0.0);
	-webkit-transition: all .35s ease;transition: all .35s ease;
}
.solutionBlock:hover img {
	-webkit-transform: scale(1.1);transform: scale(1.1);
	-webkit-transition: all .35s ease;transition: all .35s ease;
}
.solutionBlock img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-transition: all .35s ease;transition: all .35s ease;
}
.sBlockTitle {
	font-size: 1.4rem;
	font-family: 'Muli', sans-serif;
	line-height: 1.4em;
	color: #FFF;
	padding: 0 20px;
	font-weight: 800;
	text-shadow: 2px 2px #242424;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<section id="solBlocks">
			<div class="solutionBlock">
				<div class="overlay"></div>
				<img src="http://via.placeholder.com/300" alt="A">
				<div class="total-center front">
					<h2 class="sBlockTitle">A</h2>
				</div>
			</div><div class="solutionBlock">
				<div class="overlay"></div>
				<img src="http://via.placeholder.com/300" alt="B">
				<div class="total-center front">
					<h2 class="sBlockTitle">B</h2>
				</div>
			</div><div class="solutionBlock">
				<div class="overlay"></div>
				<img src="http://via.placeholder.com/300" alt="C">
				<div class="total-center front">
					<h2 class="sBlockTitle">C</h2>
				</div>
			</div>
</section>

相关问题
最新问题