CODEWITHSUNDEEP
jqueryimage
user5623896726
user5623896726

Reputation: 136

jquery cross fade two images

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

Upvotes: 1

Views: 3072

Answers (3)

Mister Epic
Mister Epic

Reputation: 16743

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

Upvotes: 1

user2652134
user2652134

Reputation:

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.

Upvotes: 2

Anton
Anton

Reputation: 32581

Try this

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

DEMO

Upvotes: 1

Related Questions