Question

I have this code that fades an image

$("#mix").click(function() {
   $("#mix").addClass("load");
      $("#brick-image").stop(true).fadeTo("slow", 0);
      $("#brick-image").load(function() {                                
         $("#mix").removeClass("load");
         $("#brick-image").stop(true).fadeTo("slow", 1);
      });
      $("#brick-image").attr("src","build.php?bricks=RT433,RT201,RT543&ratio=40,40,20&"+new Date().getTime());
});

HTML

<div id="bricks">
   <img src="build.php" id="brick-image">
</div>

<div id="mix-button">
   <a href="#" id="mix" class="load">Bland igen</a>
</div>

The problem with this is that the image fades out and then the new image fades in.
Is it possible somehow to make the new image fadein on top of the other and then hide the old image so that I will get a very smooth fade without the fade to the background first (blinking)?

build.php in the img tag is a function that creates a dynamic random image.

Answer 1

You have just one image tag there, so no, you can’t do a smooth transition.
You’ll need to make two different images, one fading out while the other is fading in at the same speed. Something like this:

HTML:

    <div id="bricks">
       <img src="build.php" class="brick-image active">
       <img src="build.php" class="brick-image">
    </div>

    <div id="mix-button">
       <a href="#" id="mix" class="load">Bland igen</a>
    </div>

CSS:

#bricks {
    position: relative;
}

.brick-image {
    position: absolute;
    display: none;
}

.brick-image.active {
    display: block;
}

JS:

$('#mix').click(function() {
   var $mix = $(this),
       $imgs = $('.brick-image', '#bricks');
       $newImg = $imgs.not('.active');

   $mix.addClass('load');
   $newImg.attr('src', 'build.php?bricks=RT433,RT201,RT543&ratio=40,40,20&'+new Date().getTime());
   $imgs.stop(true).toggleClass('active').fadeToggle('slow', function() {
       $mix.removeClass('load')
   });
});