Fade Out an Image when click on button, change image url and then fade in. How to do it?

Question

I am creating a website and I need some help with an issue. I will upload a picture for you to understand it better.

I have a big image in the middle, and below it there are some words that act like links(). I need this to happen: 1. The big image appears as the website loads. 2. When I click on a button (the words acting as links), I want the big image to fade out, then change the image src (so a different image will be displayed in the big image container) and then this different image will appear fading in.

It's something like this:

I've already tried to get this by using some jQuery, but I don't get it to work. I thought it would be something like this, but it's not working, as the image src changes, then the image appears, and after that the image fades out, leaving an empty space instead of the image:

$('.button3').on({
    'click': function(){
        $("#change-image").fadeOut("slow");
        $('#change-image').attr('src','img/project3.jpg');
        $("#change-image").fadeIn("slow");
    }
});

$('.button4').on({
    'click': function(){
        $("#change-image").fadeOut("slow");
        $('#change-image').attr('src','img/project4.jpg');
        $("#change-image").fadeIn("slow");
    }
});

etc.

Can anybody help me solving this? I know how to fade out, how to change image src, and how to fade in, but I can't do all together as I would like.

Thank you very much!!

Possible duplicate of [jQuery fade out then fade in](https://stackoverflow.com/questions/6287308/jquery-fade-out-then-fade-in) — Towkir, Apr 24 '19 at 09:27

score 4 · Accepted Answer · answered Apr 24 '19 at 09:20

fadeOut takes a second parameter, a function. You can then do what you need to do after the first image is faded out.

$('.button3').on({
    'click': function(){
        $("#change-image").fadeOut("slow", function() {
            $('#change-image').attr('src', 'https://images.freeimages.com/images/large-previews/d2f/tulips-1400882.jpg');
            $("#change-image").fadeIn("slow");
        });             
    }
});

img {
  height : 150px;
  width : 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img id="change-image" src="https://images.freeimages.com/images/large-previews/c98/ferns-3-1405636.jpg"/>
<br/><button class="button3">Click</button>

Lekens · Answer 2 · 2019-04-24T09:18:30.767

I suggest you use animate.css(https://daneden.github.io/animate.css/) so you can just manaipute this by just adding class or removing class.

npm i animate.css

Make sure #change-image has this class "animated"

   $('.button3').on({
        'click': function(){
            $("#change-image").addClass('fadeOut');
  // let keep a time out, so that it will give us a little delay to see the effect of fadeOut before fadeIn happens
setTimeout(() => {
$('#change-image').attr('src','img/project3.jpg');
 $("#change-image").removeClass('fadeOut').addClass('fadeIn');// remove the first class...else it will have the two class fadeOut and fadeIn...
}, 1000);
        }
    });

why use another library just for this when OP has already jQuery included ? It's doable with jQuery. — Towkir, Apr 24 '19 at 09:18

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

$('.button3').on({
    'click': function(){
    $("#change-image")
        .fadeOut(3000, function() {
             $('#change-image').attr('src','https://images.freeimages.com/images/large-previews/c98/ferns-3-1405636.jpg');
        })
        .fadeIn(3000);
        
    }
});

$('.button4').on({
    'click': function(){
    $("#change-image")
        .fadeOut(3000, function() {
             $('#change-image').attr('src','https://images.freeimages.com/images/large-previews/d2f/tulips-1400882.jpg');
        })
        .fadeIn(3000);

    }
});

<!DOCTYPE html>
<html>
<head>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<img id="change-image" src="https://images.freeimages.com/images/large-previews/d2f/tulips-1400882.jpg" width="500" height="333">
<button class="button3">Button1</button>
<button class="button4">Button2</button>

</body>
</html>

Try the below code..Replace the image src after fadeout.

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<img id="change-image" src="https://images.freeimages.com/images/large-previews/d2f/tulips-1400882.jpg" width="500" height="333">
<button class="button3">Button1</button>
<button class="button4">Button2</button>
<script>
$('.button3').on({
    'click': function(){
    $("#change-image")
        .fadeOut(3000, function() {
             $('#change-image').attr('src','https://images.freeimages.com/images/large-previews/c98/ferns-3-1405636.jpg');
        })
        .fadeIn(3000);
        
    }
});

$('.button4').on({
    'click': function(){
    $("#change-image")
        .fadeOut(3000, function() {
             $('#change-image').attr('src','https://images.freeimages.com/images/large-previews/d2f/tulips-1400882.jpg');
        })
        .fadeIn(3000);

    }
});
</script>
</body>
</html>

Fade Out an Image when click on button, change image url and then fade in. How to do it?

3 Answers3

Try the below code..Replace the image src after fadeout.