|
|||||
Najprej potrebujemo datoteko index.html. Kako se jo ustvari, smo spoznali v lekciji Začetki z jQuery.
|
|||||
|
|||||
jQuery-jeva metoda animate() se uporablja za izdelovanje poljubnih animacij, sintaksa pa je taka:
$(izbirnik).animate({ukazi},hitrost,povratni klic); Z izbirnikom določimo element, ki ga bomo animirali. Kot že ime pove, bomo pri ukazih določili, kako naj se element animira. Hitrost lahko določamo z slow, fast ali v milisekundah. Callback parameter, ki je neobvezen, pa je ime funkcije, ki se izvede takrat, ko se animacija konča. Zapomnite si le, da morate vsakemu elementu s CSS-om določiti pozicijo (absolute, fixed ali relative)!
|
|||||
|
|||||
Če želimo, da se naš kvadrat z besedilom premake v desno smer, v polje za vpis jQuery kode vnesemo tole:
$(document).ready(function(){ $("button").click(function(){ $("div").animate({left:'250px'}); }); }); V polje za HTML kodo pa dodamo naslednje: <button>Premakni besedilo</button> <div style="position:absolute;">Zmaga.com je zakon :)</div> Pri jQuery kodi smo izbrali element div, ki ga bomo premaknili desno za 250px (250px od levega roba spletne strani).
|
|||||
|
|||||
Če želimo spremeniti več stvari enemu elementu, morate za vsak ukaz postaviti vejico in določiti nov ukaz:
$("div").animate({left:'250px',opacity:'0.5'},"slow"); V tem primeru, se bo element prestavil za 250px od levega roba, ter spremenil svojo transparentnost.
|
|||||
|
|||||
Če pa želimo, da se element po premiku postavi nazaj na privzeto mesto, pa pod trenutno vrstico za animiranje dodamo še eno, kjer določimo transparentnost in odmik od levega roba:
$("div").animate({left:'0px',opacity:'1'},"fast"); lahko pa tudi določite kaj drugega, npr. da se elementu spremeni velikots pisave: $("div").animate({fontSize:'52px'},"slow");
|
|||||
|
|||||
Če pa se malo poigrate, pa lahko nastanejo tudi zelo zanimive animacije:
$("div").animate({left:'170px'},"slow"); $("div").animate({height:'+=80px',width:'+=610px', fontSize:'80px'},"slow"); $("div").animate({height:'-=80px',width:'-=610px', fontSize:'16px'},"slow"); $("div").animate({left:'8px'},"slow"); In HTML koda: <button>Premakni besedilo</button> <div style="background:#98fb21;height:20px;width:140px;position:absolute;">Zmaga.com je zakon <i>:)</i></div>
|
|||||
