イメージをフェードインして、エフェクトが終了したら、隣のフェードイン

Question

私は答えのために同様の質問を最初に検索しなければならないということを理解していますが、ために。私はそれに画像をフェードインしているdivを作ろうとしています、そして、それがその効果を終えた後、別のものがその隣に消えます。私はそれがjQueryコールバックで行われなければならないと確信していますが、私が試したことはすべて動作していないようです。

<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は簡単です：：.responsive、 両方のクラスとなしの表示プロパティを持っている.responsive2ここ

HTMLです。あなたがremoveClassのコールバックを持って、

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

Answer 1

あなたの思考はOKのようですが、やはり自分のコードをチェックし、fadeInのためにすることがあります。ここ

とjQueryのです。

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

Answer 2

ほとんどのjqueryアニメーション関数には、durationと[on] completeの2つのパラメータがあります。この2番目のパラメータを使用して、次のアニメーションで「続ける」ことができます。

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