Animation d'image de fond jQuery

Question

Comment animer entre deux images PNG dans jQuery? Est-ce possible? Quelque chose comme la transition CSS 3 lorsque vous passez d'une couleur à l'autre, mais j'ai besoin d'une image pour une transition d'image.

Answer 1

Découvrez ce plugin par Jack Moore a appelé jQuery Blend.

Éditer: Opps deux images, désolé. Que diriez-vous de this plugin alors?

---

Ok, si vous n'êtes pas satisfait d'un plugin, essayez ceci. J'ai posté un 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(); 
}) 

Answer 2

Cela pourrait aider: http://snook.ca/archives/javascript/jquery-bg-image-animations/

Answer 3

Quand vous dites "Animer entre deux images" voulez-vous dire que vous voulez qu'ils se fondre dans un autre?

Je pense que ce que vous avez à faire est de créer essentiellement deux divs qui flottent sous le contenu principal (en utilisant z-index), puis disparaître entre eux par:

1. l'image mettant B (cachée) derrière l'image A (par exemple, par image de réglage B z-index à 10 et de l'image A z-index à 20)

2. montrant l'image B en utilisant .show() [il serait toujours caché derrière A]

3. Fondu sur l'image A l'aide .fadeOut()

répétition 1-3 commutateur A et B

Si vous voulez que cette animation soit en cours, vous pouvez utiliser window.setInterval() pour exécuter le code de temps en temps. Vous pouvez avoir une variable current_bg qui stocke A ou B pour garder trace de la façon dont vous devriez faire le changement.