✵ jQuery.HERmione.de ✍

FadeShow

Tags	fadeIn, Gallery, animate
Abstract	Bilderfolge mit Fade Effekt
Zuletzt geaendert	2010-01-08 (von 200806-19)
Browser (getestet)	FF3.5, IE8
jQuery Version	1.3.2
Plugins
Demos	FadeShow
Hilfreiche Links

HTML

Im HTML wird nichts weiter als ein Platzhalter benoetigt.

<div id="gallery"></div>

HTML der Gallery im JavaScript

Das HTML der Gallery wird im JavaScript erzeugt.

// Array contains all IMG URIs
$anim = Array (
   "/img/demo/2008-06-19_fadeshow/aa.png",   
   [...]
);

// load images in #gallery
var gaga = new Array();
var gagahtml = '';

for  ($i=0; $i< $anim.length; $i++) {
   z = '<div id="gaga_'+ $i +'" class="gaga"><img src="http://jquery.hermione.de' + $anim[$i] + '"></div>';
   gaga.push(z);
   gagahtml += z;
}
$("#gallery").html(gagahtml);

Die einzelnen Bilder sollen uebereinander liegen, deshalb bekommen sie position: absolute; zugewiesen.

div.gaga { position: absolute; }

Animation mit jQuery animate

Die Animation wird mit der jQuery Methode animate gesteuert, die rekursiv aufgerufen wird.

showFade();
function showFade() {
   $("div.gaga").fadeOut(3000);
   $("#gaga_" + index).fadeIn(3000)
      .animate({opacity: 1.0}, 3000, function() {
         if (index == gaga.length - 1)
            index = 0;
         else
            index++;
         showFade();
      });
}