CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Andres Sanchez
Andres Sanchez

Reputation: 21

Fade in an image and after the effect finishes, fade in another next to it

I understand the rules of SO that I must search first in similar questions for the answer, but none of them in the topic got what I'm looking for. I'm trying to make a div that has an image on it fade in, and after it finishes that effect then another one fades in next to it. I'm pretty sure it has to be done with jQuery callbacks, but everything that I've tried doesn't seem to work.

Here is the HTML and the jQuery:

$(document).ready(function() {
  $(".responsive").fadeIn(2500).removeClass("responsive", function() {
    $(".responsive2").fadeIn(5000).removeClass("responsive2");
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="w3-row">
  <div class="w3-col s6 w3-center">
    <img src="https://picsum.photos/id/237/100" 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="https://picsum.photos/id/1062/100" class="responsive2">
      <a href="lu-suspension.html">
        <h1 class="center right">SUSPENSION</h1>
      </a>
    </div>
  </div>

The CSS is simple: Both classes, .responsive and .responsive2 have a display property of none.

Upvotes: 2

Views: 56

Answers (2)

fdomn-m
fdomn-m

Reputation: 28611

Most of the jquery animation functions have two parameters: duration and [on]complete. You can use this second parameter to 'continue' with the next animation, ie:

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

Upvotes: 1

Ales Trunda
Ales Trunda

Reputation: 189

Your thinking seems to be ok, but check your code again, you have the callback for removeClass, but it has to be for fadeIn.

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

Upvotes: 1

Related Questions