1

I'm trying to achieve a simple cross-fade on two images, however this seems jumpy and not very pleasing to the eye. Is there any way to determine a fadeout time and make it smoother? Currently it just ends without fading out.

Consider:

<div class="fadein">
<img src="#" border="0" width="964" height="49" alt="" style="display:block;margin:auto;" id="level2Menu" />
<img src="#" border="0" width="964" height="49" alt="" style="display:block;margin:auto;" id="level2Menu" />
</div>

.fadein {
overflow:hidden;
height: 49px;
}

    var $ = jQuery;
$(function () {
    var fElement = $('.fadein');

    if ( !console && !console.log ){
            console = {};
        console.log = function(){};
    }

    fElement.find('img:gt(0)').hide();
    setInterval(function () {
        if (!fElement.data('paused')) {
            fElement.find(':first-child').stop(true,true).fadeOut(1000).next('img').fadeIn(1000).end(1000).appendTo('.fadein'); //.stop(true,true) fixes le tabbed/hidden animation queue
        } else {
             console.log('waiting...');
        }
    }, 5000);
});

TYIA

4
  • how's this - if you make your images positioned absolutely it will remove the jumpy effect
    – Pete
    Mar 20, 2014 at 12:01
  • I see where you're going with this, but it messes up the design of my site... these images sit beneath a nav in the header Mar 20, 2014 at 12:03
  • as long as the height of .fadeIn is the height of your images then it shouldn't mess anything up as it will still take up the same space as your banners: jsfiddle.net/29Sad/4. If you want a simple fade rotator I wrote one here: jsfiddle.net/gJUPT/2
    – Pete
    Mar 20, 2014 at 12:05
  • 1
    Ah I see, that seems to have done it - cheers @Pete Mar 20, 2014 at 12:09

3 Answers 3

2

Try this : http://jsfiddle.net/29Sad/2/

.fadein img{
    position:absolute;
}
if (!fElement.data('paused')) {
            fElement.find(':first-child').stop(true,true).fadeOut(1000);
fElement.find(':first-child').next('img').fadeIn(1000).end(1000).appendTo('.fadein'); 
        }

Basically added position:absolute for images. And a bit of change in the js.

3
  • If you face trouble with layout, you can set the width and height for div.fadein. That way if would not disturb your layout, given that all the images are of same dimensions.
    – Brahma Dev
    Mar 20, 2014 at 12:07
  • As above, absolute positioning can't really be used at it messes up the site design. Thanks though! Mar 20, 2014 at 12:07
  • @user5623896726 Not necessarily.. Absolute positioning is feature built for purpose. It doesn't harm using it properly. If all your images are of same dimensions, position absolute will not harm your layout. jsfiddle.net/29Sad/5
    – Brahma Dev
    Mar 20, 2014 at 12:10
1

Try this

fElement.find(':first-child').appendTo('.fadein').fadeOut(1000, function () {
    $(this).next('img').fadeIn(1000)
});

DEMO

1
  • Better, and helpful thank you. Only problem now is, there's no real crossfade - leaves a blank area where the images did exist previously. Mar 20, 2014 at 12:06
1

Here is a method using the requestAnimationFrame, which will provide the best performance, and includes a polyfill for browsers who don't support it:

window.requestAnimFrame = (function(){
return  window.requestAnimationFrame       ||
      window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame    ||
      function( callback ){
        window.setTimeout(callback, 1000 / 60);
      };
})();

var start = null;
var fadeFlag = true;
var imgs = document.querySelectorAll('img');
    var speed = 2000;
var delay = 5000;

function step(timestamp) {
  var progress;
  var fadingIn, fadingOut;  
    fadingIn = fadeFlag ? imgs[0] : imgs[1];
    fadingOut = fadeFlag ? imgs[1] : imgs[0];

  if (start === null) start = timestamp;
  progress = timestamp - start;

  if (progress > speed) {
    if(progress > delay){
        start = null;
        fadeFlag = !fadeFlag;
    }
    else{
      fadingIn.style.opacity = progress/speed;
         fadingOut.style.opacity = progress == 0 ? 1 : 1 - progress/speed;
    }
  }
  else{
    fadingIn.style.opacity = progress/speed;
  fadingOut.style.opacity = progress == 0 ? 1 : 1 - progress/speed;
  }
  requestAnimationFrame(step);
}

requestAnimationFrame(step);

http://jsfiddle.net/29Sad/9/

ref: http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/ https://developer.mozilla.org/en/docs/Web/API/window.requestAnimationFrame

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.