All geek questions in one place

JQuery background image animation

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

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

+4
source share
3 answers

Check out this Jack Moore plugin called jQuery Blend .

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

Well, if you are not happy with the plugin, try this. I posted here 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(); })
+3
source

When you say "Animation between two images", do you mean that you want them to disappear with each other?

I think you will need to create two divs that float under the main content (using z-index) and then disappear between them:

  • placing image B (hidden) behind image A (say, by setting image B z-index to 10 and image A z-index to 20)

  • shows image B with .show () [it will still be hidden behind A]

  • Image A attenuation using .fadeOut ()

repeat 1-3 switches A and B

If you want this animation to continue, you can use window.setInterval () to run the code so often. You may have a current_bg variable that stores A or B to keep track of how you should make the switch.

+1
source

Source: https://habr.com/ru/post/1299195/

More articles:


All Articles