Question

I have implemented Responsive Slider on my test server:
http://test-orange.com/resp/

If you watch the slideshow you’ll see that as each slide fades out and the next fades in, the background shows during the fade.

I do not want the background to show like this. I want each slide image to fade seemlessly to the next image.

Anyone know how I can modify the responsiveslides.js code to do this?
I think this is the part that needs to be edited:

      if (settings.auto === true) {
        setInterval(function () {
          $this.find(':first-child').fadeOut(fadetime, function () {
            $(this).css(hidden);
          }).next($slide).fadeIn(fadetime, function () {
            $(this).css(visible);
          }).end().appendTo($this);
        }, parseFloat(settings.speed));

Answer 1

If you want a seamless fade, you won’t get it with fade. When node fades, it looses opacity. With linear fade, on the half way, both nodes are half-opaque. One would assume 50% + 50% would sum to 100% and give a fully opaque image mixed fifty-fifty, but this is light, not oranges, it doesn’t sum like so. With light it is like this:

opacity = layerA + (layerB * layerA)

What you’ll end up with is a 75% opacity and that’s what leaves the remaining 25% for the background to seep through from underneath in the middle of the fade. That’s what cross-fade does. For extended reasoning see this nice question and its answer(s).

For smooth transition attaining 100% opacity full-time you need a different technique. You need to fade in the new slide over the previous, which does not fade at all. It stays at 100% and this way the background doesn’t have a chance. Once the next slide is faded-in, you hide the previous one.

Generally, instead of this:

$previous.fadeOut(fadetime);
$next.fadeIn(fadetime);

you need this:

$next.fadeIn(fadetime, function(){
    $previous.hide();
});