4

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.

Tower
  • 98,741
  • 129
  • 357
  • 507

3 Answers3

3

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();
})
Mottie
  • 84,355
  • 30
  • 126
  • 241
  • It does not blend between two images. It has an image below a solid color layer that it uses to make this "blend" animation. – Tower Jan 23 '10 at 15:18
  • I added some code... it does pretty much what Jordan describes. – Mottie Jan 23 '10 at 17:04
  • Thanks, it's certainly of useful. I'm wondering if I should now take the path and use this hackish method to achieve the result or just wait for an official CSS/jQuery implementation. – Tower Jan 23 '10 at 18:27
  • What do you mean by "official"? And how is the code I provided hackish? – Mottie Jan 23 '10 at 19:56
  • I imagine by "official" they actually mean a full-on jQuery plugin that looks something closer to $("selector").animateBackgrounds({action: 'switch',backgrounds: ['bg1.png','bg2.png','bg3.png'],effect: 'dissolve'}) Unlikely to be built anytime soon since I would imagine this is a fairly unusual request. As far as "hackish" I would actually agree with him to the extent that this code doesn't have the normal clean look that most jQuery does, but that's mostly because so much of the functionality has to be handcoded rather than using already extant jQuery functions. – Jordan Reiter Jan 26 '10 at 22:09
  • The only change I might make to your code is to have jQuery create the display1 and display2 divs itself. Also, I haven't tested it but I'm not sure that as it stands you could actually have content in in the .wrap div and have display1 and display2 show behind it, since I'm fairly sure you'd need to set the z-Index as well. But major kudus for actually implementing the thing! – Jordan Reiter Jan 26 '10 at 22:11
  • Hi Jordan, thanks for the feedback. I thought about having the code create the display1 and display2, but I figured it would just make the code that much longer *shrug*. I'd modify it, but it doesn't seem like the original poster cares anymore? Also, since the display2 is after display1 in the HTML, it will always be above display1, so I didn't bother adding a z-index. – Mottie Jan 26 '10 at 23:40
2

This might help: http://snook.ca/archives/javascript/jquery-bg-image-animations/

Michael Bray
  • 14,998
  • 7
  • 42
  • 68
  • 1
    It does not animate between two images, all it does is that it moves one image over another image. – Tower Jan 23 '10 at 14:49
1

When you say "Animate between two images" do you mean you want them to fade into one another?

I think what you would have to do is basically create two divs that float underneath the main content (using z-index) and then fade between them by:

  1. putting image B (hidden) behind image A (say, by setting image B's z-index to 10 and image A z-index to 20)

  2. showing image B using .show() [it would still be hidden behind A]

  3. Fading out image A using .fadeOut()

repeat 1-3 switch A and B

If you want this animation to be ongoing, you could use window.setInterval() to run the code every so often. You could have a variable current_bg that stores either A or B to keep track of which way you should make the switch.

Jordan Reiter
  • 20,467
  • 11
  • 95
  • 161
  • Ok. Do you think that there's gonna be a jQuery implementation or a CSS implementation that allows image-to-image animations in the future? I could just wait for it... or make a hackish attempt to achieve it now. – Tower Jan 23 '10 at 18:24