当我单击 .nexto
元素时,我尝试将动画应用到 .typeform
元素。当使用toggleClass
时,所有.typeform
都受到toggleClass
的影响。
当我单击 .nexto
时,我需要将动画应用到下一个 .typeform
元素。请帮我解决这个问题。谢谢。
$('.nexto').on('click', function(event) {
$('.typeform-element').toggleClass('animations');
})
.animations {
animation: animation-1 1s linear;
}
@keyframes animation-1 {
0% {
top: -50px;
opacity: 0;
}
50% {
top: -25px;
opacity: 0.5;
}
100% {
top: 0px;
opacity: 1;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="typeform">
<div class="typeform-element" id="fname">
<p><span class="list">1</span>→What's your First Name? *</p>
<input type="text" name="fname" placeholder="Type your answer..." autofocus>
<div class="ok-btn">
<a href="#lname" class="nexto">OK ✔</a>
</div>
</div>
<div class="typeform-element" id="lname">
<p><span class="list">2</span>→What's Your Last Name? *</p>
<input type="text" name="lname" placeholder="Type your answer...">
<div class="ok-btn">
<a href="#email" class="nexto">OK ✔</a>
</div>
</div>
<div class="typeform-element" id="email">
<p><span class="list">3</span>→Let's know your Email Address*</p>
<input type="email" name="email" placeholder="Type your answer...">
<div class="ok-btn">
<a href="#submit" class="nexto">OK ✔</a>
</div>
</div>
<div class="typeform-element" id="submit">
<div class="ok-btn">
<a href="#fname">Submit ✔</a>
</div>
</div>
</div>
最佳答案
您需要访问按钮父级,然后选择紧随其后的同级,并仅切换他的类。
$('.nexto').on('click', function(event){
$(this).closest('.typeform-element').next('.typeform-element').toggleClass('animations');
});
关于jQuery 对所有元素进行动画处理,而不是仅对下一个元素进行动画处理,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60336737/