Question

How do I animate between two PNG images in jQuery? Is this possible?

Something like the CSS 3 transition when you transit between one color to another, but I need an image to an image transition.

Answer 1

Check out this plugin by Jack Moore called jQuery Blend.

Edit: Opps two images, sorry. How about this plugin then?

---

Ok, if you aren’t happy with a plugin then try this. I posted a demo here.

CSS/HTML

<style type="text/css">
.wrap {
 margin: 50px auto;
 width: 200px;
 height: 200px;
 background: #555;
 position: relative;
}
.display1, .display2 {
 position: absolute;
 top: 0;
 left: 0;
}
</style>
<div class="wrap">
 <div class="display1"></div>
 <div class="display2"></div>
</div>

Script

$(document).ready(function(){
 var bkgImgs = ([
  ['http://i50.tinypic.com/2iiz9cm.gif', 86, 86],
  ['http://i45.tinypic.com/dop26e.png', 128, 128],
  ['http://i48.tinypic.com/xcosnq.png', 64, 64]
 ]);
 var delay = 5000;
 var transition = 1000;

 var i = 0;
 var l = bkgImgs.length-1;
 imgs = function(x){
  return {
   background: 'url(' + bkgImgs[x][0] + ') no-repeat center center',
   width:      bkgImgs[x][1],
   height:     bkgImgs[x][2],
   left:       $('.wrap').width()/2 - bkgImgs[x][1]/2,
   top:        $('.wrap').height()/2 - bkgImgs[x][2]/2
  }
 }
 next = function(){
  var oldpic = imgs(i);
  i++;
  if (i > l) i = 0;
  var newpic = imgs(i);
  $('.display2').css(oldpic).show();
  $('.display1').hide().css(newpic).fadeIn(transition);
  $('.display2').fadeOut(transition);
  setTimeout( function(){ next() }, delay );
 }
 next();
})