jQuery Change Image src with Fade Effect

Question

I'm trying to create an effect where you click on a thumbnail image, and the link to the thumbnail will replace the main image, but fade it in. This is the code I'm currently using:

$(".thumbs a").click(function(e) {
    e.preventDefault();
    $imgURL = $(this).attr("href");
    $(".boat_listing .mainGallery").fadeIn(400, function() {
        $(".boat_listing .mainGallery").attr('src',$imgURL);
    });
});

This works and replaces the image without a fade effect. What do I need to change to get the fadeIn effect to work?

Sylvain · Accepted Answer · 2018-09-28T21:59:09.237

87

You have to make it fadeOut() first, or hide it.

Try this :

$(".thumbs a").click(function(e) {
    e.preventDefault();
    $imgURL = $(this).attr("href");
    $(".boat_listing .mainGallery")
        .fadeOut(400, function() {
            $(".boat_listing .mainGallery").attr('src',$imgURL);
        })
        .fadeIn(400);
});

It should fadeOut the image, then change the src when it's hidden, and then fadeIn.

Here's a jsFiddle example.

Edit: you can find a more recent & better solution in Sandeep Pal's anwser

edited Sep 28 '18 at 21:59

answered May 12 '11 at 14:34

Sylvain

3,823
1
27
32

1

Make sure you check @Sandeep Pal's for concurrent fade in/out rather than having a delay between them. If that's what you're looking for. – yougotiger Sep 27 '18 at 22:37

score 36 · Answer 2 · edited Jul 31 '23 at 04:47

36

I think that instead of using FadeIn and fadeOut, it's better to use fadeTo functionality as fadeIn and fadeOut created a time gap between them for few micro-seconds.

I have used above code from Sylvain : thanks to him

$("#link").click(function() {

  $("#image").fadeTo(1000,0.30, function() {
      $("#image").attr("src",$("#link").attr("href"));
  }).fadeTo(500,1);
  return false;
});

edited Jul 31 '23 at 04:47

Haydentech

1,096
1
11
27

answered May 23 '13 at 12:36

Sandeep Pal

2,067
1
16
14

I had issues with making fadeIn/fadeOut work for Firefox. This solution works for all browsers. Thanks! – DIG Apr 09 '15 at 17:53

score 4 · Answer 3 · answered Oct 19 '16 at 14:34

I reproduced the given samples above. It gives a strange flickering, which I found that it waits for image to load after it's opacity is restored to 1. I modified the code by Sandeep.

$("#link").click(function() {

$("#image").fadeTo(1000,0.30, function() {
  $("#image").attr("src",$("#link").attr("href"));
  $("#image").on('load', function(){
    $("#image").fadeTo(500,1);
  });
 });
 return false;
});`

score 1 · Answer 4 · answered May 12 '11 at 14:34

1

You cannot fade-in something that is already at 100% alpha :)

In other words, you either fade it out or hide it, and then fade it in.

I made this example, basically, I hide it and then fade it:

http://jsfiddle.net/uGFMt/

answered May 12 '11 at 14:34

jackJoe

11,078
8
49
64

jQuery Change Image src with Fade Effect

4 Answers4

Linked