gpt4 book ai didi

jQuery 对所有元素进行动画处理,而不是仅对下一个元素进行动画处理

转载 作者:行者123 更新时间:2023-12-01 03:30:35 25 4
gpt4 key购买 nike

当我单击 .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>&#8594;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 &#10004;</a>
</div>
</div>
<div class="typeform-element" id="lname">
<p><span class="list">2</span>&#8594;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 &#10004;</a>
</div>
</div>
<div class="typeform-element" id="email">
<p><span class="list">3</span>&#8594;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 &#10004;</a>
</div>
</div>
<div class="typeform-element" id="submit">
<div class="ok-btn">
<a href="#fname">Submit &#10004;</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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com