[js/jquery] Syntaxfout, of wat doe ik verkeerd?

[Karp]

Ik heb iets wat niet werken wil, en ik weet niet waarom. Ik heb een aantal .project-div's waarvan allen op de bovenste na moeten verschuiven.

Het volgende werkt:

JavaScript:

$('.project:gt(0)').animate({ top: 50, left : '+=5'}, 1000);

Het volgende werkt ook:

JavaScript:

var waarde = 50;
$('.project:gt(0)').animate({ top: waarde, left : '+=5'}, 1000);

Maar bij deze verschuift hij alleen naar rechts.

JavaScript:

$('.project:gt(0)').animate({ top: function() {return (50);}, left : '+=5'}, 1000);

Met welke informatie moet ik mijn gebrekkige javascript-kennis uitbreiden om dit tot een succes te laten worden?

Alvast bedankt

[Xuj]

Disclaimer: Ik ben geen JavaScript-guru.

Werken zulke functies? Ik dacht ik test het even in een alert(), daar werkte het niet.

Wat als je eerst je functie definieert?

JavaScript:

function foo()
{
    return 50;
}
$('.project:gt(0)').animate({ top: foo(), left : '+=5'}, 1000);

[Karp]

Dat werkt ook gewoon maar ik wil het graag binnen de statement hebben omdat het een soort loop is, en ik wil uiteindelijk natuurlijk meer dan alleen die waarde van 50 doorgeven.

[Phoenix1337]

Als je afhankelijk van de div wil verschuiven kun je ook kijken naar $.each

[aaajeetee]

Ik ben ook geen javascript guru, maar moet je die anonieme functie niet aanroepen op een of andere manier?

[Xuj]

Pagina over anonieme functies in JavaScript: http://helephant.com/2008/08/javascript-anonymous-functions/

[Voor 75% gewijzigd door Xuj op 30-10-2010 20:45. Reden: Ik sprak onzin]

[Karp]

Phoenix1337 schreef op zaterdag 30 oktober 2010 @ 20:32:
Als je afhankelijk van de div wil verschuiven kun je ook kijken naar $.each

Hmm ja, misschien is dat voorlopig de makkelijkste oplossing. Dank je!

[apokalypse]

aaajeetee schreef op zaterdag 30 oktober 2010 @ 20:35:
Ik ben ook geen javascript guru, maar moet je die anonieme functie niet aanroepen op een of andere manier?

Inderdaad. De animate functie krijg een map type aan. Deze wordt waarschijnlijk uitgelezen als map.top of map['top']. Indien dit een (inner) functie is, zou het aangeroepen moeten worden als map.top(). De documentatie geeft nergens aan dat (inner) functies gesupported worden onderdeel van een map.

De vraag is ook wat het nut is van een innerfunctie hier. Indien je een waarde net voor het animeren wilt ophalen/berekenen, kan je dit ook met een variabele doen zoals het 2de voorbeeld in de start post.

Karp schreef op zaterdag 30 oktober 2010 @ 20:28:
Dat werkt ook gewoon maar ik wil het graag binnen de statement hebben omdat het een soort loop is, en ik wil uiteindelijk natuurlijk meer dan alleen die waarde van 50 doorgeven.

Waarom is dit een soort loop? Animate doet maar een enkele animatie?

[Voor 21% gewijzigd door apokalypse op 30-10-2010 21:03]

[Karp]

apokalypse schreef op zaterdag 30 oktober 2010 @ 20:56:
[...]

Inderdaad. De animate functie krijg een map type aan. Deze wordt waarschijnlijk uitgelezen als map.top of map['top']. Indien dit een (inner) functie is, zou het aangeroepen moeten worden als map.top(). De documentatie geeft nergens aan dat (inner) functies gesupported worden onderdeel van een map.

De vraag is ook wat het nut is van een innerfunctie hier. Indien je een waarde net voor het animeren wilt ophalen/berekenen, kan je dit ook met een variabele doen zoals het 2de voorbeeld in de start post.

[...]

Waarom is dit een soort loop? Animate doet maar een enkele animatie?

$('.project:gt(0)') selecteert meerdere elementen en zorgt dus voor meerdere animaties.

[Maximized]

Het probleem is, dat je hier een functie invoegt als een parameter zonder deze uit te voeren. Dit werkt dus bijvoorbeeld wel:

JavaScript:

$('.project:gt(0)').animate({ top: (function() {return (50);})(), left : '+=5'}, 1000);

Let hier op de ronde haken en de bekende () aan het einde. Op deze zelfde manier worden in de praktijk singleton instanties gecreëerd waarbij de functie bij het declareren direct wordt uitgevoerd.

Afijn. Haken d'r omheen en je bent klaar.

/edit Overigens: je hebt het hier over een loop. In bovenstaand voorbeeld is echter geen sprake van recursiviteit op wat voor manier dan ook, tenzij de methode animate() zelf-aanroepend is op de een of andere manier.

[Voor 19% gewijzigd door Maximized op 30-10-2010 21:38]

[Matis]

In weet niet precies in welke browser jij je scripts draait. Maar Firefox heeft een hele goede javascript-console.

In combinatie met Firebug (console.log FTW) kun je heel eenvoudig je javascripts debuggen en ook on the fly aanpassen