Thema: einfaches script mit mootools

hallo,

ich möchte ein script welches für jQuery konzipiert ist in mootools umschreiben. Leider habe ich schon ein grundsätzliches Problem mit der neuen mootools Syntax, stöber jetzt schon ein ganzes Stück auf mootools.net herum aber kann mir darauf noch keinen Reim machen.

Könnte mir bitte jemand ein Beispiel geben für einen Schriftgrößenwechsel bei Mouseover.

Ich wäre sehr dankbar.

Ja aber da sieht der Effekt nicht so schön aus da die hover-Werte sofort übernommen werden. mit javascript hat man dann so einen schicken übergang.... den kann man mit css nicht nachbilden soweit ich weiss...

mir geht es im endeffekt erstmal um diesen paar zeilen nur

Code:

	    $(".item1").hover(function() {
    	$(this).stop().animate({ paddingLeft: '15px', fontSize:"14px" }, 400);  
    }, function() {
		$(this).stop().animate({ paddingLeft: '0px', fontSize:"12px" }, 400);  
    });

Vielen Dank für den Link, der bringt mich wieder etwas weiter!

Zitat von JoomDesign

Hab deine Posts zum Thema JavaScript verfolgt.
Schon lustig. Zig mal versuchen jQuery einzubinden und dann doch auf MT ausweichen. *grins*[/COLOR]

Ja das stimmt, bin nun der Meinung das mit dem entsprechenden Wissen Mootools genauso leistungsfähig ist. Der große Vorteil bei Joomla ist nicht zu letzt das Mootools bereits integriert ist und man nicht noch ein extra Framework einbinden muss und sich dann mit dem noConflict Mode rumschlagen muss.

den Code hab ich mir zusammengebastelt, funktioniert auf einer Testseite auch ohne Probleme. Ich habe nur ein Problem diesen Effekt auf meine Links in meinem Menu-Modul zu übertragen. Die Einträge haben keine eindeutigen "id's", nur der "class"-name ist eindeutig, kann man diesen auch verwenden? Wenn ja mit welcher Syntax?

Code:

		
window.addEvent('domready', function(){
			var list = $$('#custom li');
			list.each(function(element) {
				
				var fx = new Fx.Styles(element, {duration:400, wait:false});
				
				element.addEvent('mouseenter', function(){
					fx.start({
						'padding-left': 15,
						'font-size': '14px',
					});
				});
				
				element.addEvent('mouseleave', function(){
					fx.start({
						'padding-left': 0,
						'font-size': '12px',
					});
				});
				
			});
		});

*klatschmichselbst*... erst denken dann überlegen!

Vielen Dank, es funktioniert!