Question

I am trying to fade in an image when I click on a link, but that gives me a “blink” on every fade. Is there anyway to avoid this blink and just have a clean fadeIn?

This is my current code:

function changeMortar(mortar) {
     var html = '<img src="http://www.randerstegl.dk/fileadmin/fugefarver/GFXSharedMortars/fuge'+mortar+'.png" width="500" height="300">'                    
        $("#fuge-color").hide().html(html).fadeIn('slow');
    }​

I have made this example
http://jsfiddle.net/BHCam/14/

It fades to white and then into the mortar I selected. What I want is to have my selected mortar, fade over the old mortar.

Answer 1

I have made some changes to your code. Try like this in HTML:

<div id="slideshow">
   <img src="http://www.randerstegl.dk/fileadmin/fugefarver/GFXSharedMortars/fugeGraa.png" alt="" class="active" width="500" height="300"/>
   <img src="http://www.randerstegl.dk/fileadmin/fugefarver/GFXSharedMortars/fugeAnthrazit.png" width="500" height="300" />

</div>
<a href="#" class="change-mortar-link" onclick="slideSwitch();">Change mortar</a>

In CSS:

#slideshow {
   position:relative;
   height:350px;
}
#slideshow IMG {
  position:absolute;
  top:0;
  left:0;
  z-index:8;
}
#slideshow IMG.active {
   z-index:10;
}
#slideshow IMG.last-active {
   z-index:9;
}

And The JavaScript code:

function slideSwitch() {
   var $active = $('#slideshow IMG.active');

   if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

   var $next =  $active.next().length ? $active.next()
    : $('#slideshow IMG:first');

   $active.addClass('last-active');

   $next.css({opacity: 0.0})
      .addClass('active')
      .animate({opacity: 1.0}, 1000, function() {
          $active.removeClass('active last-active');
     });
  }

And in here you can find more information. And here is the running example in JsFiddle.