Py学习  »  Jquery

jQuery设置所有元素的动画,而不是只设置下一个元素的动画

manoj • 4 年前 • 323 次点击  

.typeform 当我单击 .nexto 元素。使用时 toggleClass .字体 受到 切换类 .

.字体 当我单击 .nexto公司 . 请帮帮我。谢谢。

$('.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>
Python社区是高质量的Python/Django开发社区
本文地址:http://www.python88.com/topic/55112
 
323 次点击  
文章 [ 1 ]  |  最新文章 4 年前
Mahatmasamatman
Reply   •   1 楼
Mahatmasamatman    4 年前

您需要访问您的按钮父级,然后选择紧随其后的同级,并仅切换其类。

$('.nexto').on('click', function(event){
           $(this).closest('.typeform-element').next('.typeform-element').toggleClass('animations');
    });