时间戳

首页 > 解决方案 > 如何在点击时分别为每个元素设置动画？

javascript - 如何在点击时分别为每个元素设置动画？

问题描述

我当前的代码为“.movi​​nglinecontainer”类的所有实例设置动画。我希望我的代码只为被点击的实例运行。

我尝试实现 $(this) 但似乎无法使其正常工作。 

function ani() {
  var loadingbar = jQuery('.movinglinecontainer');
  if (loadingbar.hasClass('movingline')) {
    loadingbar.removeClass('movingline').addClass('movinglinereverse');
  } else if (loadingbar.hasClass('movinglinereverse')) {
    loadingbar.removeClass('movinglinereverse').addClass('movingline');
  } else {
    loadingbar.addClass('movingline');
  }
};
jQuery(document).ready(function() {
  jQuery('.movinglinecontainer').on("click", function() {
    ani();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="intro">Frequently Asked Questions</div>
<div class="faq-accordion" data-accordion-group="">
  <div data-accordion="" class="faq-main" onclick="ani();">
    <div data-control="" class="faq-title">
      <h4>Question goes here?</h4>
    </div>
    <div id="" class="movinglinecontainer"></div>
    <div data-content="" style="max-height: 0px; overflow: hidden; transition: max-height 300ms ease 0s;">
      <div class="faq-content">
        <p class="answer-content">Answer goes here</p>
      </div>
    </div>
  </div>
  <div data-accordion="" class="faq-main" onclick="ani()">
    <div data-control="" class="faq-title">
      <h4>Question 2 goes here?</h4>
    </div>
    <div id="" class="movinglinecontainer"></div>
    <div data-content="" style="max-height: 0px; overflow: hidden;">
      <div class="faq-content">
        <p class="answer-content">Answer 2 goes here!</p>
      </div>
    </div>
  </div>

标签： javascriptjquery

解决方案

您可以尝试将$(this)作为参数传递给您的函数：

function ani(loadingbar) {
  if(loadingbar) {
    if (loadingbar.hasClass('movingline')) {
      loadingbar.removeClass('movingline').addClass('movinglinereverse');
    } else if (loadingbar.hasClass('movinglinereverse')) {
      loadingbar.removeClass('movinglinereverse').addClass('movingline');
    } else {
      loadingbar.addClass('movingline');
    }
  }
  
};

jQuery(document).ready(function() {
  jQuery('.movinglinecontainer').on("click", function() {
    ani($(this));
  });
});
.movinglinecontainer {
  height: 20px;
  transition: width 3s linear;
  background: aqua; 
  width:30%
}

.movingline {
  width: 100%
}

.movinglinereverse {
  width: 30%
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="intro">Frequently Asked Questions</div>
<div class="faq-accordion" data-accordion-group="">
  <div data-accordion="" class="faq-main" onclick="ani();">
    <div data-control="" class="faq-title">
      <h4>Question goes here?</h4>
    </div>
    <div id="" class="movinglinecontainer"></div>
    <div data-content="" style="max-height: 0px; overflow: hidden; transition: max-height 300ms ease 0s;">
      <div class="faq-content">
        <p class="answer-content">Answer goes here</p>
      </div>
    </div>
  </div>
  <div data-accordion="" class="faq-main" onclick="ani()">
    <div data-control="" class="faq-title">
      <h4>Question 2 goes here?</h4>
    </div>
    <div id="" class="movinglinecontainer"></div>
    <div data-content="" style="max-height: 0px; overflow: hidden;">
      <div class="faq-content">
        <p class="answer-content">Answer 2 goes here!</p>
      </div>
    </div>
  </div>

推荐阅读