Jquery .animate flackert im FF

matze_te · 13.04.2010, 09:48

Hallo liebe Leute,
ich habe da ein kleines Problem ich möchte gerne 2 divs mit jquery tauschen und dazu nutze ich jquery animate. klappt auch soweit alles ganz gut nur das problem ist das wenn das div sehr groß wird und man dann bis nach ganz unten an den anschlag scrollt flackert es im FF wenn es sich wieder einschiebt. ich habe mal eine sehr abgespecktes script gemacht:

PHP-Code:

  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">

function maximieren(id)

{ 

    klein= "#info_klein";

    gross =  "#info_gross";

       $(gross).stop();

         $(gross).animate({

                opacity: 1,

                height: '2240px',

                width: 740,

                marginTop: "10px"  

                  }, 1000, function() {

                // Animation complete.

              });

 
    $(klein).stop();

    $(klein).animate({

                opacity: 0,

                height: '0',

                width: 740,

                marginTop: "0px"

                  }, 1000, function() {

                // Animation complete.

              });

}

 
 
function minimieren(id){

    klein= "#info_klein";

    gross = "#info_gross";

 
     $(klein).stop();

     $(klein).animate({

                opacity: 1,

                height: '128',

                width: 740,

                marginTop: "10px"                

                  }, 1000, function() {

                // Animation complete.

              });

 
     $(gross).stop();

     $(gross).animate({

                opacity: 0,

                height: '0',

                width: 740,

                marginTop: "0px"                

              }, 1000, function() {

                // Animation complete.

              });

}

 </script>    

</head>

<body>

 
<div id="info_klein" onclick="maximieren();" style="background-color:green; height:128px; width:740px;">

</div>

<div id="info_gross" onclick="minimieren();" style="background-color:red; height:0; opacity:0; width:740px; filter: alpha(opacity=0);">

 
</div>

</body>

</html>

hierbei sieht man es nicht ganz so gut aber wenn man in diesen divs inhalte hat oder mehrere Divs auf diese weise ausklappt dann wirds doch sehr unschön... ich habe mir schon einen kleinen workaround gebastelt indem ich ein div darum gelegt habe das beim ausklappen auch die höhe erhällt und etwas zeitversetzt wieder zu geht naja auch net gerade schön aber ohne inhalte flackerts hat net so doll aber es springt dann.
Hat jemand ne Idee oder weiss warum es ausschließlich im FireFox so ist?

Gruß Matze

halskrause · 16.04.2010, 10:05

Das Problem habe ich auch bei stark befüllten Divs. Ich denke mal, dass es an der Prozessor/Grafikleistung des Clients liegt.
Versuche bei animierten Sachen, keine grossen Bilder (vor allem nicht mit AlphaKanal) einzusetzen.

PS: jQuery läuft am besten (flüssiger!) mit Safari.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
JQuery Upload mittels Array/hiddenfields	Das_Pfau	JavaScript, Ajax und mehr	7	13.03.2010 11:03
[Erledigt]br filtern mit Jquery (oder Javascript)	chunky	JavaScript, Ajax und mehr	4	05.03.2010 14:48
jQuery Ajax und $(this) Problem	halskrause	JavaScript, Ajax und mehr	8	01.03.2010 17:39
Bei Upload mit Jquery Multifile-Plugin wird immer nur eine Datei hochgeladen	Silent	PHP Tipps 2010	20	25.02.2010 08:24
[Erledigt] Jquery Selektoren	chunky	JavaScript, Ajax und mehr	5	14.02.2010 11:14
jQuery Ablauf	halskrause	JavaScript, Ajax und mehr	8	24.11.2009 13:14
[Erledigt] [Erledigt] jQuery Endlos Scrolling Umlaute	kn0wledge	JavaScript, Ajax und mehr	0	18.10.2009 19:29
jQuery Dokus/Tuts	MaiKaY	Off-Topic Diskussionen	9	25.09.2009 16:52
jQuery mit AJAX ohne ActiceX im IE?	krush	JavaScript, Ajax und mehr	2	11.08.2009 08:54
Umsetzung von parentNode in jQuery	nikosch	JavaScript, Ajax und mehr	8	03.08.2009 21:25
JQUERY - divs auf und zuklappen	sturmi	JavaScript, Ajax und mehr	5	04.06.2009 14:23
[Erledigt] jQuery Dateien nachladen	Phoscur	JavaScript, Ajax und mehr	7	14.03.2009 13:44
jQuery Plugin - so richtig?	stayInside	JavaScript, Ajax und mehr	5	23.02.2009 12:34
For Schleife mit jQuery	phpbeginner	JavaScript, Ajax und mehr	3	22.11.2008 22:35
Thickbox Funktionalität in jQuery	Plague	JavaScript, Ajax und mehr	1	28.07.2008 23:58

13.04.2010, 09:48
matze_te Neuer Benutzer Registriert seit: 19.08.2009 Beiträge: 8 PHP-Kenntnisse: Anfänger	Jquery .animate flackert im FF Hallo liebe Leute, ich habe da ein kleines Problem ich möchte gerne 2 divs mit jquery tauschen und dazu nutze ich jquery animate. klappt auch soweit alles ganz gut nur das problem ist das wenn das div sehr groß wird und man dann bis nach ganz unten an den anschlag scrollt flackert es im FF wenn es sich wieder einschiebt. ich habe mal eine sehr abgespecktes script gemacht: PHP-Code: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> function maximieren(id) { klein= "#info_klein"; gross = "#info_gross"; $(gross).stop(); $(gross).animate({ opacity: 1, height: '2240px', width: 740, marginTop: "10px" }, 1000, function() { // Animation complete. }); $(klein).stop(); $(klein).animate({ opacity: 0, height: '0', width: 740, marginTop: "0px" }, 1000, function() { // Animation complete. }); } function minimieren(id){ klein= "#info_klein"; gross = "#info_gross"; $(klein).stop(); $(klein).animate({ opacity: 1, height: '128', width: 740, marginTop: "10px" }, 1000, function() { // Animation complete. }); $(gross).stop(); $(gross).animate({ opacity: 0, height: '0', width: 740, marginTop: "0px" }, 1000, function() { // Animation complete. }); } </script> </head> <body> <div id="info_klein" onclick="maximieren();" style="background-color:green; height:128px; width:740px;"> </div> <div id="info_gross" onclick="minimieren();" style="background-color:red; height:0; opacity:0; width:740px; filter: alpha(opacity=0);"> </div> </body> </html> hierbei sieht man es nicht ganz so gut aber wenn man in diesen divs inhalte hat oder mehrere Divs auf diese weise ausklappt dann wirds doch sehr unschön... ich habe mir schon einen kleinen workaround gebastelt indem ich ein div darum gelegt habe das beim ausklappen auch die höhe erhällt und etwas zeitversetzt wieder zu geht naja auch net gerade schön aber ohne inhalte flackerts hat net so doll aber es springt dann. Hat jemand ne Idee oder weiss warum es ausschließlich im FireFox so ist? Gruß Matze


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

16.04.2010, 10:05
halskrause Erfahrener Benutzer Registriert seit: 29.08.2008 Beiträge: 777	Das Problem habe ich auch bei stark befüllten Divs. Ich denke mal, dass es an der Prozessor/Grafikleistung des Clients liegt. Versuche bei animierten Sachen, keine grossen Bilder (vor allem nicht mit AlphaKanal) einzusetzen. PS: jQuery läuft am besten (flüssiger!) mit Safari.