如何在類添加或刪除後淡入淡出路徑？

-1

我正在爲某些路徑添加一個類，並且一旦將類添加到每個路徑後，我想逐漸淡化這個類。這是我曾嘗試如何在類添加或刪除後淡入淡出路徑？

$(".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() {}); 
 
    }); 
 
});

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

來源

2017-03-29 rob.m

作爲一個建議，我會在你的問題中包含一些HTML，這樣你的例子就完成了。另外，告訴我們爲什麼你的代碼不起作用 - 你的結果與你試圖達到的結果有什麼不同？（哦，你錯過了一個'}）;'） – Santi

@Santi我已經添加了html，它不會褪色，如果我知道爲什麼我不會問一個問題，但是無論如何感謝 –

它不是由於標記錯誤而顯示。我編輯了你的問題以包含一個片段，並添加了兩個缺少的'}）;'。再一次，這並不能解決你的問題**最小，完整，可驗證的例子**因爲不僅你的代碼不工作，你還沒有告訴我們它有什麼問題。請[請閱讀此]（https://stackoverflow.com/help/mcve）以獲得指導，否則您將面臨被關閉的問題。 – Santi

這是我如何解決它，我第一次添加的類別，然後我申請的延遲給它，也改變了縫隙的衰落和之間速度更好地注意它。

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

來源

2017-03-29 17:49:21

如何在類添加或刪除後淡入淡出路徑？

回答

相關問題