Question

我正在做以下事情，但它一下子消失在路径中而不是一个接一个地消失

  var periodClass = jQuery(this).parent().attr("class");
  jQuery("svg path").each(function(i) {
    var elem = jQuery(this);
    if (elem.hasClass(periodClass)) {
        elem.addClass('active').css('transition-delay', i/5000 + 's');
    } else {
        elem.removeClass('active').css('transition-delay', i/5000 + 's');
    }
  });

CSS

path {
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0.7s;
}

path.active {
    opacity: 1;
    transition-property: opacity;
    transition-duration: 0.7s;
}

还试过这个，但仍然，一下子

  var periodClass = jQuery(this).parent().attr("class");
  jQuery("svg path").each(function(i) {
    var elem = jQuery(this);
    if (elem.hasClass(periodClass)) {
      elem.addClass('active');
      elem.each(function(index) {
          $(this).delay(400*index).fadeIn(300);
      });
    } else {
      elem.removeClass('active');
      elem.each(function(index) {
          $(this).delay(400*index).fadeOut(300);
      });
    }
  });

Answer 1

您需要使用setTimeout();

这是一个例子

＆＃13;

$(document).ready(function(){
  $('div').each(function(i){
    var ThisIt = $(this);
    setTimeout(function(){
      ThisIt.addClass('active');
    } , i * 1000);
    
  });
});

＆＃13;

div{
  margin: 20px;
  padding: 10px;
  font-size: 30px;
  text-align: center;
  background : #eee;
  display: none;
}

.active{
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

＆＃13;

Answer 2

嗯，一种方法：

 var pnum = 0;
 var $paths = $("svg path");

 nextFade();

 function nextFade () {
    $paths.eq(pnum).fadeOut( "slow", function() {
        // Animation complete. Increase counter Call next fade.
        pnum++;
        if(pnum < $paths.length){
            nextFade();
        } 
     });
 }

如何一个接一个地淡入/淡出svg路径？

2 个答案: