JQuery - Fondu dans une nouvelle image de fond?

Question

Je pense que je peux essayer quelque chose qui n'est pas possible.

J'ai récemment été chargé de créer une version html du site flash. Sur le site flash lorsque vous cliquez sur le corps, l'image change. J'ai fait cela avec JQuery. C'est brilliant! Cependant .. ce n'est pas "flash" assez. Les pouvoirs qui sont veulent un effet de fondu entre les images.

C'est là que je suis complètement défait.

Voici comment fonctionne mon script pour le moment.

Les images sont stockées dans un div appelé photos. C'est caché. Lorsque la page est chargée, jquery vérifie si la première image est chargée. Si ce n'est pas le cas, un symbole de chargement tourne. Lorsque l'image est chargée, elle devient l'arrière-plan du corps.

$("body").css('background', 'url(' + photos[currentImage]["url"] + ') no-repeat 50% 50% fixed ' + photos[currentImage]["background"]); 

J'ai essayé ce qui suit.

J'ai essayé d'animer. Cependant, cela ne fonctionne pas.

J'ai essayé ce plugin: http://plugins.jquery.com/project/bgImageTransition

Cela ne fonctionne pas non plus. Il semble cloner l'étiquette et faire quelque chose. Je suppose que cela ne fonctionne pas parce que vous ne pouvez pas cloner l'étiquette du corps. C'est ou c'est vraiment vieux et n'est plus compatible avec la version actuelle de JQuery. Je crains d'avoir codé mon chemin dans une impasse. Est-ce que quelqu'un sait comment je pourrais faire ce travail?

Answer 1

Il est impossible de fondre des images d'arrière-plan sans utiliser plus d'une étiquette. Donc, la meilleure solution serait d'utiliser un 100% largeur/hauteur à l'intérieur de votre et en utilisant le plugin bgImageTransition sur ce div.

Answer 2

Filthy, et le balisage supplémentaire, mais si vous êtes désespéré:

• un div derrière Underlay votre contenu
• Définir ses dimensions pour correspondre corps
• Définir son opacité à 0
• Set son arrière-plan d'image
• Incrémenter l'opacité à se faner dans

Si vous vous retrouvez à plusieurs reprises entre les images, vous pourriez probablement les faire alterner entre ce div et le corps, ce qui atténuera la div superposée.