JavaScript动画同步

JavaScript Animation Sync

本文关键字：同步 动画 JavaScript      更新时间：2023-09-26

我有两组HTML元素。第2组中每个元素的字体颜色自动从一个跳到另一个。现在，我希望它与第1组同步，该组是静态的，需要随着组2的幻灯片而更改。

每当我点击组1中的元素时，我希望组2中的元素也发生变化。

.active {
  color: red;
}
<h2>Group 1</h2>
<ul id="group-1">
  <li class="active">Trigar 1</li>
  <li>Trigar 2</li>
  <li>Trigar 3</li>
  <li>Trigar 4</li>
  <li>Trigar 5</li>
</ul>
<h2>Group 2</h2>
<ul id="group-2">
  <li class="active">Lorem ipsum dolor sit amet.</li>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Lorem ipsum dolor sit amet.</li>
</ul>

http://jsfiddle.net/17sz2cv2/1/

当#group-1中的活动元素已设置时触发此：

$("#group-1").children("li").each(function(index){
   if($(this).hasClass("active")) {
      $("#group-2 li:nth-child("+(index+1)+")").addClass("active");
   }
});

另请参阅http://jsfiddle.net/17sz2cv2/4/

相关文章：