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

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();

这里是一个例子

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

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

 
.active{ 
 
    display: block; 
 
}

<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>

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(); 
     } 
    }); 
}