Mootools: Fx.Transitions will nicht

DataFox · 28. November 2007

Hi

ich werde aus http://docs.mootools.net/Effects/Fx-Transitions.js#Fx.Transitions.Quad nicht schlau.

Eigentlich hatte ich was ganz einfaches vor: Anstatt ganz plump die top- und left-Eigenschaften zu ändern, soll ein Element "geschmeidig" von A nach B bewegt werden.

Mein Versuch:

Code:

	var el = document.getElementById("beweg_mich");
	var fx = new Fx.Style(el, {duration:100, transition: Fx.Transitions.linear});
	fx.start({
		'top': 500],
		'left': 300]
	});

ich bekomme immer eine Fehlermeldung das ein Objekt erwartet wird. Mein DIV hat natürlich die id "beweg_mich" und ist absolut positioniert...

Kennt sich hier jemand mit Mootools aus?

Würde mich freuen!!

Danke
Laura

lay-z-cow · 29. November 2007

MOO!

Leider machst du zuwenige Angaben, als dass man deinen Code genau analysieren könnte. Bei Transitions kommt es nicht nur auf das JS, sondern auch auf das CSS an (nicht nur absolute, auch top und left muss bspw. gesetzt sein)

Zumindest deine schließenden eckigen Klammern machen in den Optionen keinen Sinn.

Ich geb dir mal ein Beispiel, wie es funktioniert (beachte dabei das style-Attribut im moveDiv!):

HTML:

<html>
	<head>
		<script type="text/javascript" src="mootools.js"></script>
		<script type="text/javascript">			
			
			function moveDiv()
			{
			
				// Das zu bewegende Element
				var el = $('moveDiv');
				// Neuer Effekt
				var fx = new Fx.Styles(el, {duration: 1000, transition: Fx.Transitions.linear});
				// Effekt starten - Mit "Zielwerten" für Top und Left
				fx.start({
					'top': 500,
					'left': 300
				});
				
			}
			
		</script>
	</head>
	<body>
		
		<div id="moveDiv" style="background: #424242; position: absolute; top: 100px; left: 100px;	height: 50px;	width: 50px;"></div>
				
		<a href="#" onclick="moveDiv()">Move the Div!</a>
		
	</body>
	
</html>

Gruß

.:lay.-z-cow:.

Mootools: Fx.Transitions will nicht

DataFox

Erfahrenes Mitglied

lay-z-cow

Erfahrenes Mitglied

Neue Beiträge