✔ [jQuery] 2 Effekte parallel laufen lassen

W

weedo

Erfahrenes Mitglied
Hi,

ich wollte gerne mit Hilfe von jQuery ein Div nach dem Klick auf ein Objekt vom Punkt, wo der Mauszeiger ist an eine bestimmte stelle einfliegen lassen.

Ich habe dafür die Funktionen fadeIn() und animate() gewählt. Das Fenster fadet und fliegt rein. Aber leider nacheinander. Kann man das parallel laufen lassen?

Hier einmal den Quellcode:

Javascript: 
$("#folder").click(function(e){
    	var posx = 0;
    	var posy = 0;
    	if (!e) var e = window.event;
    	if (e.pageX || e.pageY) 	{
    		posx = e.pageX;
    		posy = e.pageY;
    	}
    	else if (e.clientX || e.clientY) 	{
    		posx = e.clientX + document.body.scrollLeft
    			+ document.documentElement.scrollLeft;
    		posy = e.clientY + document.body.scrollTop
    			+ document.documentElement.scrollTop;
    	}
      if(document.getElementById("folder_window").style.display == "none") {
        document.getElementById("folder_window").style.left = posx;
        document.getElementById("folder_window").style.top = posy;
      }
      $("#folder_window").fadeIn("slow");
      $("#folder_window").animate({
        duration: "fast",
        top: "150px",
        left: "250px", 
      });
    });

lg weedo
 
Moin,

fadeIn() beinhaltet ja nur das ändern der opacity.
Wenn du das auch in animate() unterbringst, sollte das synchron laufen.
 
Fumktioniert auch nicht wie es soll. Ich bekomme zwar die Funktion rein, und sie wird auch ausgeführt, jedoch immernoch so, wie vorher.

Jetzt ist mir aufgefallen, dass ich den Parameter opacity, den animate() noch anbietet nicht probiert habe. Aber da passiert gleich garnichts. Weder mit wert 1, .5 oder 0...
 
weedo hat gesagt.:
Jetzt ist mir aufgefallen, dass ich den Parameter opacity, den animate() noch anbietet nicht probiert habe. Aber da passiert gleich garnichts. Weder mit wert 1, .5 oder 0...
Zum Vergrößern anklicken....

So hatte ich dies eigentlich auch gemeint.
Warum es nicht geht, kann ich dir nicht sagen, ohne den Code zu sehen.
Dass es prinzipiell funktioniert, kannst du gern testen:
Code: 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 
                                charset=ISO-8859-1"   />
<meta name="author"             content="doktormolle" />
<meta name="date"               content="2010-02-28" />
<title>Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
<!--
function fx()
{

      $("#folder_window")
        .css('opacity',0)
        .stop(1,1)
        .animate({duration: "slow", top: "0",    left: "250px",  opacity:1})
        .animate({duration: "slow", top: "350px",left: "250px",  opacity:0.2})
        .animate({duration: "slow", top: "350px",left: "650px",  opacity:0.8})
        .animate({duration: "slow", top: "50px", left: "650px",  opacity:0})
        .animate({duration: "slow", top: "50px", left: "250px",  opacity:1})
        .animate({duration: "slow", top: "0",    left: "250px",  opacity:0.2})
        .animate({duration: "slow", top: "0",    left: "-100px", opacity:0});
}
//-->
</script>
<style type="text/css">
<!--
#folder_window{position:absolute;top:0;left:-100px;background:red;width:100px;height:100px;border:1px solid #000;}
-->
</style>
</head>
<body>
<b onclick="fx()" style="cursor:pointer">klick</b>
<div id="folder_window">moin</div>
</body>
</html>
 
Super. Ich hab zwar keine Ahnung warum es davor nicht ging, aber jetzt geht es.

Danke für deine Hilfe. Auch wenn sie mir im Endeffekt nichts genützt hat, da ich jetzt auf eine andere Engine umgestiegen bin.

Jquery im Opera und im InternetExplorer bei mir komische dinge, bzw garnichts gemacht und ich hab keine Fehler gefunden. Deshalb bin ich jetzt auf scriptaculous umgestiegen. Da funktioniert alles so wie es soll.

Danke dennoch vielmals :)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück