nicht angemeldet
jquery ie animate
Hallo,
ich habe mir da wa gebastelt was auch soweit ganz gut funktioniert, aber natürlich macht der IE8 ärger.
Der Übergang der Bilder ist ruckelhaft.
Wisst Ihr woran das liegen kann?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Beispiel</title>
<link rel="stylesheet" type="text/css" href="av.css" />
<script type="text/javascript" src="./jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="./av.js"></script>
</head>
<body>
<div id="ebene1">
<div id="bilderstapel">
<img id="bild" src="./img/schwarz.JPG" class="oben" alt="" />
<img id="bildhome" src="./img/schwarz.JPG" alt="" />
<img id="bildreise" src="./img/rot.JPG" alt="" />
<img id="bildtest" src="./img/weiss.JPG" alt="" />
</div>
</div>
<div id="ebene2">
<div id="menueebene">
<div id="menue">
<ul>
<li class="lihome"><a href="index.html" >
<img src="./img/menue1.gif" width="96" height="44" border="0" alt=""></a>
</li>
<li class="lireise"><a href="reise.html" >
<img src="./img/menue2.gif" width="96" height="44" border="0" alt=""></a>
</li>
<li class="litest"><a href="test.html" >
<img src="./img/menue3.gif" width="96" height="44" border="0" class="imgFade" alt=""></a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
body {
background-color: #ffffff;
}
#ebene1 {
background-color: #3c3c3c;
/*opacity:0.8; /*firefox*/
/*filter:alpha(opacity=80);/*IE*/
width: 100%;
height: 1000px;
}
#menueebene {
position:absolute; top: 10px; left:200px;
width: 100px;
height: 43px;
}
#menue {
background-image: url(./img/menuebg.gif);
background-repeat: repeat-x;
position:absolute; top:0px; left: 0px;
list-style: none;
width: 760px;
height: 360px;
}
#menue ul {
}
#menue li {
float:left;
list-style: none;
position: relative; top: 0px; left: 100px;
}
#menue a {
color: #98D7DA;
text-decoration: none;
display: block;
height: 43px;
width: 96px;
}
.lihome {
background-image: url(./img/menue1.gif);
background-repeat: no-repeat;
}
.lireise {
background-image: url(./img/menue2.gif);
background-repeat: no-repeat;
}
.litest {
background-image: url(./img/menue3.gif);
background-repeat: no-repeat;
}
.imgFade {
left:100px;
filter:alpha(opacity=0);
opacity:0.0;
-moz-opacity:0.0;
-khtml-opacity:0.0;
}
#bild {
border: 1px solid #a5a5a5;
padding: 2px;
position: absolute; top: 60px; left: 200px;
height: 250px;
width: 500px;
}
#bildhome {
border: 1px solid #a5a5a5;
opacity: 0;
filter:alpha(opacity=0);
padding: 2px;
position: absolute; top: 60px; left: 200px;
height: 250px;
width: 500px;
}
#bildreise {
border: 1px solid #a5a5a5;
opacity: 0;
filter:alpha(opacity=0);
padding: 2px;
position: absolute; top: 60px; left: 200px;
height: 250px;
width: 500px;
}
#bildtest {
border: 1px solid #a5a5a5;
opacity: 0;
filter:alpha(opacity=0);
padding: 2px;
position: absolute; top: 60px; left: 200px;
height: 250px;
width: 500px;
}
.oben {
opacity: 1;
filter:alpha(opacity=100);
z-index: 5;
}
.unten{
z-index: 1;
}
-
Wisst Ihr woran das liegen kann?
Nein. Aber du kannst dich ggf. hier schlau machen: Tipps für Fragende.
-
Nun was meinst du was ich schon seit 2 Tagen mache.
Aber leider ohne Erfolg.
Wenn du vielleicht weißt wo ich eine Antwort auf das ruckel bekomme wäre ich dir dankbar.Hier kann man das ganze Online sehen:
http://www.abfunktechnik.de/html/thorsten/index.html-
Nun was meinst du was ich schon seit 2 Tagen mache.
2 Tage die Tippfs für fragende lesen? :)
Wenn du vielleicht weißt wo ich eine Antwort auf das ruckel bekomme wäre ich dir dankbar.
Das Problem liegt aber auch ggf daran, dass du bei hover (und zurücksetzen davon) jeweils nur die Animation am aktuellen Bild stoppst - nicht auf allen Bildern.
btw: FadeIn und FadeOut könnten dich interessieren.
Im IE7 ruckelts übrigens auch.
-
Mit Fade habe ich das Problem auch.
Leider!
Nun mal sehen ob ich irgendwo dazu was finde-
Mit Fade habe ich das Problem auch.
Dass FadeIn und FadeOut dein Problem lösen habe ich auch nich gesagt - es wäre nur ein Ersatz für Animate der exakt das tut, was du benötigst und marginal performanter ist.
Nun mal sehen ob ich irgendwo dazu was finde
Ich hoffe du hast meinen anderen Hinweis nicht ignoriert - jener der sich damit beschäftigt dass du sehr unvorteilhaft herumanimierst.
Ebenso sind deine Selektoren sehr Performancelastig (img#foo ist z.B. schneller als #foo). Alleine das Überprüfen ob die beiden Bild-Elemente denselben Inhalt im src-Attribut haben (und das bei jedem hover-Event). Ich könnet mir vorstellen, dass das wegen des event bubblings zu starken performanceeinbrüchen führt.
Anstatt einem hover-Event auf alle 3 li-Elemente bindest du an jedes Element ein eigenes - das ist äußerst redundant.
Anstatt ein Bild entsprechend seiner Reihenfolge im DOM (aufgrund des index des gehoverten li-Elements) zu faden prüfst du wie gesagt mit einer if-Bedingung die Gleichheit der src-Attribute und selektierst dabei zu allem übel jedes mal die Elemente neu.
Noch schlimmer: du lässt 2x Animation ohne chaining gleichzeitig laufen - im Falle von jQuery kann das ein absolutes No-Go sein. Wärend du das eine element einfadest fadest du das andere aus - das ist Unsinn - positioniere das Zielelement unter das Startelement und blende nur das Zielelement aus - oder umgekehrt. Beides gleichzeitig ist jedenfalls Unsinnig.
Unter Opera 9.64 ruckelts übrigens auch wie sau :)
-
Erstmal vielen Dank für deine Hilfe!
Da ich gerade erst mit Jquery anfange, sind einige deiner Hinweise mir noch nicht ganz klar. Na ich werde einfach weiter lernen und lesen, irgendwann klappt es schon.
Red
-
Da ich gerade erst mit Jquery anfange, sind einige deiner Hinweise mir noch nicht ganz klar. Na ich werde einfach weiter lernen und lesen, irgendwann klappt es schon.
Nochwas: ich habe heute durch zufall festgestellt, dass animate() unter IE7, IE8 und Opera total in die Knie geht, sobald in einem Dokument eine Bildressource eingebunden hat die "sehr groß" ist (bezogenauf die Pixeldimension, nicht auf die Dateigröße).
Warum das so ist kann ich mir aktuell nicht erklären, aber es ist so :).
In deinem Fall könnte das auch ein Grund sein, tausche deine Bilder mal gegen kleinere aus. Deine Bilder sind immerhin 1504x1000px groß.
Frag' mich übrigens nicht (die Dateigröße scheint hier wie gesagt keine so große Rolle zu spielen), warum das so ist - ich bin selber grade seit ein paar Stunden am rätseln, weil ich das für Projekt brauche :).
-
Ja es liegt an der Größe!!
Nun ich nehme mal an, dass das verkleiner Zeit braucht.Ich hab es jetzt erstmal so gemacht:
$(document).ready(function() { $('.lihome').hover(function(){ $('#bildhome').fadeIn('slow'); },function(){ $('#bildhome').fadeOut('slow'); }); $('.lireise').hover(function(){ $('#bildreise').fadeIn('slow'); },function(){ $('#bildreise').fadeOut('slow'); }); });und die Bilder in css auf display:none gestellt.
Jetzt nuss ich es nur noch hinkriegen, dass das erste Bild beim link wechsel nicht kurz durchscheint. Hurra!
Danke Red
Was für ein Projekt?
-
Was für ein Projekt?
Eine Bildergalerie für einen bekannteren Künstler.
-
-
-
-
-
-
-
-