Увядание в изображении и после того, как эффект заканчивается, исчезают в другом рядом с ним

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-прост: Оба класса, .responsive и .responsive2 медийное свойство нет.

А вот 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 имеют два параметра: продолжительность и [вкл.]. Вы можете использовать этот второй параметр для продолжения следующей анимации, то есть:

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