淡入圖像，效果完成后，淡入圖像

Question

我了解SO的規則，我必須首先在類似的問題中搜索答案，但是該主題中沒有一個得到我想要的東西。 我正在嘗試使具有圖像的div淡入，在完成該效果后，旁邊會逐漸淡入另一個。 我很確定它必須使用jQuery回調來完成，但是我嘗試過的一切似乎都沒有用。

這是HTML：

<div class="w3-row">
<div class="w3-col s6 w3-center">
<img src="img/tuning.png" class="responsive">
    <a href="lu-sound.html">
        <h1 class="center left">SOUND</h1>
    </a>
</div>
<div class="w3-row">
<div class="w3-col s6 w3-center">
<img src="img/tuning.png" class="responsive2">
<a href="lu-suspension.html">
        <h1 class="center right">SUSPENSION</h1>
</a>
</div>
</div>

CSS很簡單：.sensitive和.sensitive2這兩個類的顯示屬性均為none。

這是jQuery：

<script type="text/javascript">
    $(document).ready(function () { 
        $(".responsive").fadeIn(2500).removeClass("responsive", function() {
            $(".responsive2").fadeIn(5000).removeClass("responsive2");
        });
    });
</script>

Answer 1

你的想法似乎是確定的，但檢查你的代碼再次，你有回調removeClass ，但它必須是fadeIn 。

$(".responsive").fadeIn(2500, function() {
    //callback
}).removeClass("responsive");

Answer 2

大多數jquery動畫函數都有兩個參數：duration和complete。 您可以使用第二個參數來繼續下一個動畫，即：

$(function() { 
    $(".responsive").fadeIn(2500, function() { 
        $(this).removeClass("responsive");
        $(".responsive2").fadeIn(5000, function() { 
            $(this).removeClass("responsive2");
        });
    });
});