Jquery onComplete függvény paraméterrel (egyből lefut)
Üdvözletem!
Tegnap egy problémába ütköztem, amikor Jquery animate() függvényének onComplete paraméterének akartam adni egy függvényt, aminek paraméterként át akartam adni az idxA animáció megkezdéskori értékét.
A jelenség az, hogy az animáció megkezdésekor lefut, nem pedig a befejezésekor.A konkrét project itt elérhető
Keveset dolgoztam JavaScriptben, gondolom nagy baki lehet. :>
A segítséget előre is köszönöm.
■ Tegnap egy problémába ütköztem, amikor Jquery animate() függvényének onComplete paraméterének akartam adni egy függvényt, aminek paraméterként át akartam adni az idxA animáció megkezdéskori értékét.
A jelenség az, hogy az animáció megkezdésekor lefut, nem pedig a befejezésekor.
function displayTiles(){
var rid = Math.floor(Math.random()*(tileDirs.length));
var tdiv = null;
var tch = null;
$('img.tilech').css('opacity', 0);
for(idxA = 1; idxA <=6; idxA++){
tdiv =$('div#tdiv'+idxA);
tch = tdiv.children('img.tilech');
tch.attr("src","images/tiles/"+tileDirs[rid]+'/tile'+idxA+'.png');
tch.animate({'opacity' : '1'}, Math.floor(Math.random()*1000)+250, (function(tn){
tdiv.css('background-image', 'url(images/tiles/'+tileDirs[rid]+'/tile'+tn+'.png)');
$('img.tilech').css('opacity', 0); // OK
})(idxA));
}
}Keveset dolgoztam JavaScriptben, gondolom nagy baki lehet. :>
A segítséget előre is köszönöm.
Closure
animateegy függvényt vár onComplete paraméternek, de te nem adsz neki vissza semmit. Mivel meghívsz egy függvényt, ami le is fut, de nem ad vissza semmit (undefined), ami átadsz azanimatefüggvénynek.Nézzük, mi is történik itt:
idxAparaméterrel, ezért a függvény azonnal le is fut, azaz beállítja azopacity-t 0-ra, valamint átállítja a háttérképet azonnal, még azanimatelefutása előtt. Majd visszaad egyundefinedértéket a függvény (mivel ha nem adsz vissza semmit egy függvényből, akkor automatikusan azundefinedérték adódik vissza). Ezt azundefined-ot átadod azanimatefüggvénynek. Gondolom nem ezt szeretnéd.Valamint ha már closure-t használsz, akkor figyelned kell arra, hogy a
tdiva függvényen belül a legutoljára beállított értéket fogja jelenteni akkor, amikor a függvény lefut. Azaz ebben az esetben ha ténylegesen sikerül átadni ezt a függvényt majd azanimate-nek, akkor atdivebben a formában$("div#tdiv6")lesz minden esetben.függvényt függvénnyel
Tehát onComplete nem egy "meghívott", hanem egy "meghívandó" függvény.
Ha írok egy függvényt, ami visszaadja azt a függvényt, amit meg kell hívni?
detto
Nekem is hasonló problémám van, ezért is nem nyitottam új témát.
Egy toplistát szeretnék folyamatosan frissíteni úgy, hogy időközönként meghívok egy ajax-ot, ami visszaad 3 ul-t (3-féle toplistát). Ezt beteszem egy láthatatlan div-be, ul-enként beteszem egy-egy változóba, aztán li-nként megnézem, hogy hányadik helyen áll az eredeti toplistában, majd a jelenlegi helyzetéhez animálom marginTop-pal.
A gond az, hogy a callback-et nem ismerem még, meg azt, hogy pontosan hogy kell változókat átadni pl. egy animate fgv.-nek, de a beszélgetésetekből okulva átalakítottam a script-et, és egy része működik is, de a másik része nem.
Itt a script:
A fadeIn-re és az animate-re betettem a return-ös megoldást, és az animate-re működik is, de a fadeIn-re nem.
Átadtam a fgv.-eknek a tömböket, de a fadeIn valahogy nem fut le.
Előre is köszi
Minimális példa
példa
ITT
Script ITT
Ez pont ugyanúgy működik, mint az eredeti, ajax hivás nélkül, meg az alján, ami a látható rész alá csúszik, az eredetileg tényleg nem látszik.
Minimál? :)
Ez nem az. :)
A kód fele ekkora lenne, ha a felesleges függvények, függvényt visszaadó függvények egyszerűsödnének.
Mivel nem tudom, mi a hiba,
De
Kiszedtem mindent, ami nem
HTML ITT
SCRIPT ITT
Ami ebből is látszik már, hogy egyszerre fut le az aminate és a fadeIn.
Úgy kellene, hogy először a targetUl fadeOut és ulOver fadeIn egyszerre, és utána fusson csak le az animate. Aztán ulOver fadeOut, targetUl fadeIn egyszerre és utána ulOver remove.
gyanú
Kiszedtem minden olyan
függvény vs. függvényhívás
Sok helyen feleslegesen van függvényt visszaadó függvény, de itt szimpla függvényhívás van, becsomagolva egy függvényhívásba.
Dehát a jquery nem úgy
így:
Legelőször így csináltam, de
thisUl vs. ul
Ezért is jobb egyszerűen írni, mert a sok ugyanolyan változó között nehéz átlátni, hogy éppen, mikor, hogyan, hol... de az biztos, ha az eredeti függvénynek át tudtad adni azt a három változót, akkor így is át kellene tudni. :)
A változót át tudom adni, de
Kipróbáltad?
Persze, hogy kipróbáltam, de
A ulOver.fadeIn lefut...
Én egy technikai hibára hívtam fel a figyelmedet. Ha egy függvényt várunk valahol paraméterként, akkor annak így kell kinéznie.
Viszont itt logikai hiba is van, létrehozol egy ul-t, majd animáltatod, majd animáció végén teszel bele elemeket. A liAnim függvényt tovább kell bontanod. Egyik felét az ulOver.fadeIn előtt, másik felét utána kell futattni.
Közhely, de örök igazság: azért kell kis, rövid függvényeket írni, hogy minden függvénynek pontosan tudjuk a feladatát. Ha egy kilométeres függvényt írsz, akkor persze, hogy egy idő után teljesen átláthatatlan, hogy mit is csinál, miért is csinálja és egyáltalán nem lesz egyértelmű, hogy mit szerettünk volna, hogy csináljon...
Sejtettem, hogy az üres ul
korai optimalizálás
De végre összeállt a
Köszi a segítséget, most már legalább működik minden úgy, ahogy akartam, összerakom újra az egészet! :)
targetUl.fadeIn(500); ulOver.