Question

我正在为一些路径添加一个课程，并且一旦将课程添加到每个路径中，我想一个接一个地淡化theese。这就是我试过的

＆＃13;

$(".home button").on("click", function() {

  $("#hiButtons .btn-default").removeClass("active");
  $(this).addClass("active");
  var periodClass = $(this).parent().attr("class");
  var gapBetweenEach = 10;
  var speedOfFade = 150;
  
  $("svg path").each(function(i, path) {
    var cl = $(this).attr('class');
    $(this).attr('class', cl.includes(periodClass) ? cl + ' fadeIn' : cl.replace(/fadeIn/g, '')).delay(gapBetweenEach * i).fadeIn(speedOfFade, function() {});
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg>
       <path class="fadeIn"></path>
       <path class="fadeIn"></path>
       <path class="fadeIn"></path>
    </svg>

＆＃13;

Answer 1

这就是我解决它的方法，我首先添加类，然后我将延迟应用到它，也改变了fadings和速度之间的差距，以便更好地注意它。

$(".home button").on("click", function() {
  $("#hiButtons .btn-default").removeClass("active");
  $(this).addClass("active");
  var periodClass = $(this).parent().attr("class");
  var gapBetweenEach = 200;
  var speedOfFade = 400;
  $("svg path").each(function(i, path) {
    var cl = $(this).attr('class');
    $(this).attr('class', cl.includes(periodClass) ? cl + ' fadeIn' : cl.replace(/fadeIn/g, ''))
    $(".fadeIn").delay(gapBetweenEach * i).fadeIn(speedOfFade);
  });
});

添加或删除类后，如何淡化和淡化路径？

1 个答案: