Unterscheidliche Darstellung in jQuery Animation

DiDiJo · 16. August 2010

Hi Leute,

ich bastel gerade an einer kleinen Mini-Animation für einen Homepage-Header.
Dort sollen nacheinander 3 Bilder reinlaufen / eingebelendet werden.

Ich hab jetzt 2 verschiedene Animationen erstellt und bei beiden Unterscheiden habe ich unterscheidliche Darstellungen im IE / Firefox.

Beispiel 1:
klick
Hier sollen die Bilder nacheinader reinlaufen. Funktioniert in beiden Browsern wunderbar, allerdings ist die Startposition der Bilder im IE eine andere als im Firefox, was besonders beim ersten Bild stört.

Hier mal mein HTML / JS-Code:

HTML:

<script type="text/javascript">
$(function() {
	$('#image1').animate({
		rotate: 4,
		top: -30,
		left: 80
	},1000, '', function() {	
		$('#image2').animate({
			rotate: -2,
			top: 100,
			left: 400		
		}, 1000, '', function() {
			$('#image3').animate({
				rotate: -5,
				top: 105,
				left: 650
			}, 1000);
					
		});		
	});
						
});
</script>
<div id="header">
        <div id="imageHolder">
            <img id="image1" src="pics/sp/1.jpg" alt=""/>
            <img id="image2" src="pics/sp/2.jpg" alt=""/>
            <img id="image3" src="pics/sp/3.jpg" alt=""/>        
        </div>
</div>

Hier die wichtigsten CSS Anweisungen:

Code:

#imageHolder {
	position:relative;
	
}
#imageHolder img{	
	display:block;	
	position:absolute;
	top:-1000px;	
	left:480px;
	/*left:-300px;*/
}

#image1 {z-index:100;}
#image2 {z-index:50;}
#image3 {z-index:1;}

Beispiel 1:
klick
Hier sollen die Bilder nacheinader eingefadet werden. Ach dasfunktioniert soweit ganz super. Allerdings werden im IE die Bilder erst mit abgeschnittenen Kanten dargestellt. Die Kanten werden erst sichtbar, wenn die fadeIn Animation abgeschlossen ist.

Hier der HTML / JS-code:

HTML:

<script type="text/javascript">
$(function() {
		
	$('#image1 img').animate({
		rotate: 4,		
	},1, '', function() {	
		$('#image2 img').animate({
			rotate: -2,			
		}, 1, '', function() {
			$('#image3 img').animate({
				rotate: -5,				
			}, 1, '', function() {
				
				
				$('#imageHolder').fadeIn(1000,function() {
					$('#image1').fadeIn(1000,function() {
						$('#image2').fadeIn(1000,function() {
							$('#image3').fadeIn(1000);
						});
					});
				});
				
					
			
			});					
		});		
	});
	
});
</script>
<div id="header">
 <div id="imageHolder" style="display:none">
   <div class="pic" id="image1"  style="display:none"><img src="pics/sp/1.jpg" alt=""/></div>
   <div class="pic" id="image2"  style="display:none"><img src="pics/sp/2.jpg" alt=""/></div>
   <div class="pic" id="image3"  style="display:none"><img src="pics/sp/3.jpg" alt=""/></div>        
 
</div>        
</div>

Hier noch die CSS Anweisungen:

Code:

#imageHolder {
	position:relative;	
}

#imageHolder .pic{		
	position:absolute;
}


#imageHolder .pic img{		
	border:3px solid #FFFFFF;
}


#image1 {
	z-index:100; 
	top:-30px; 
	left:80px;
}
#image2 {
	z-index:50; 
	top:100px; 
	left:400px;
}
#image3 {
	z-index:1; 
	top:105px; 
	left:650px;
}

Wenn ich im 2. Beispiel die Fade-In Animationen entferne, wird übrigens alles normal dargestellt.

Ich hab jetzt gerade mal noch nen 3. Beispiel erstellt. Da soll das ergebniss genauso aussehen, wie in Beispiel 2 ... allerdings versuche ich das ganze ohne diese komischen .pic-Divs. Im Firefox siehts mal wieder super aus (wie war es auch anders zu erwarten) und im IE liegen alle Bilder übereinander. Hier greifen irgendwie nicht die Positionen aus der CSS-Datei

Hier das Beispiel: klick

Kann mir jewmand erklären wie die unterschiedlichen Darstellungen zustande kommen ?

Sven Mintel · 16. August 2010

Moin,

#1:
Das einzige, was ich entdecke, dürfte den unterschiedlichen Browser-Default fürs margin des <body> geschuldet sein. Ergo: definiere ein einheitliches margin per CSS

#2 & #3:

Beide Beispiele werden von mir im IE angesichts von Syntaxfehlern ignoriert.
Ursache sind die Optionen für animate. Dort hast du jeweils nach der Option noch ein Komma zu stehen, was bedeutet, dass noch ein Member folgt...es folgt aber keiner.

#2 :
Ich kann dort keine abgeschnittenen Kanten entdecken

#3:

allerdings versuche ich das ganze ohne diese komischen .pic-Divs

Das hättest du nicht tun sollen:
http://github.com/heygrady/transform/issues/#issue/6

Unterscheidliche Darstellung in jQuery Animation

DiDiJo

Erfahrenes Mitglied

Sven Mintel

Mitglied

Neue Beiträge