_nec - webfejlesztés, front-end programozás, javascript, css, xhtml, ajax, air

Három hasznos jQuery plugin

Három olyan plugin-t mutatnék be röviden, melyek funkcionalitásuk alapján alapvetőnek érezhetőek, de a sima jQuery csomagból kimaradtak, valószínüleg helyspórolás, erőforrás kímélés céljából, no meg ezek valóban csak animációkhoz szükségesek. Mind a három kiterjesztés az .animate() metódus használatakor lehet hasznos.

backGround animation

A segítségével háttérképet mozgathatunk, majdnem a megszokott sílus attribútummal az .animate() metódus paraméterei között. 

$('#myId').animate({backgroundPosition: '(150px 250px)'}); // ide
$('#myId').animate({backgroundPosition: '(-75px -50px)'}); // vagy oda

Érdemes odafigyelni a paraméterek körüli zárójelekre.

A plugin itt érhető el , használatára példa pl itt a menüben.

color animation

Ez a plugin lehetne talán igazán része a teljes csomagnak, pláne hogy John Resig írta – aki a jQuery-t magát is. Segítségével betűszínt, keretszínt és háttérszínt animálhatunk egy értékre.

$('.box')
	.animate({ backgroundColor: "blue" }, 'slow') // elobb legyen kek
	.animate({ backgroundColor: "#ff9900" }, 'slow') // aztan narancs

Itt a plugin oldala, példát pedig itt találhattok.

jQuery easing

Kicsit zavarbaejtő a jQuery dokumentációja az animate esetén:

animate( params, [duration], [easing], [callback] )

Az easing nincs túlságosan kifejtve, sokszor nem is használjuk emiatt. Ez a plugin rengeteg animációs effektet ad, amivel feldobhatjuk alkalmazásunkat.

$('.box').animate({
	width: '+=250',
	height: '+=200',
	left: 100,
	top: 200
},'slow','easeOutBack');

A plugin oldala, a mozgásokra az összes példa demó ugyamott, némi funkcionális játszadozás pedig itt látható.

Hozzászólások, trackbackek [trackback url]

1. szabi 14:17 | 2009.04.20

   Hopp, pont ezeket használom. Kivéve a bg animot, nekem tile-os kellene és még nem vettem a fáradságot, hogy megírjam.

   Amúgy color animationnek van néhány nyitott bugja, ami idegesít, pl. múltkor abba futottam bele, h. először volt $(”.valami”).css({borderColor: “red”}), majd a bordercolor animate, amitől a color anim elhasal (a red miatt).

   Easing: ugyenezek a függvények vannak a tweener as3 libben is, nem tudom fejből a jóember nevét, de a jq plugin tkp egyetlen nagy copy-paste + 10 saját sor :)