jQuery animate vraagje

[PlugInBeer]

Hallo tweakers,

ik zit momenteel even vast met een stukje jQuery code.

Ik heb een lange tabel waarvan 3 rows worden laten zien, en als er op het next knopje word gedrukt, krijg je de volgende 3 te zien.

Nou heb ik een stukje code dat prima werkt, voor de eerste 3. Maar ik wil graag dat als er op het next knopje gedrukt word, telkens (in dit geval) -352px bij afgetrokken worden (wat dus -704px word) en bij elke klik dus weer dat getal er vanaf getrokken word. Tot een bepaald getal (laten we zeggen 1408px) dat het next knopje het niet meer doet, en niet meer verder gaat (omdat er niks meer is). En natuurlijk moet het terug knopje het tegenovergestelde doen.

Helaas heb ik niet heel veel ervaring met jQuery en weet ik alleen de basis. Daarom hoopte ik dat iemand mij hierbij kon helpen. Ik heb me rot gezocht op internet wat me helaas geen resultaat op leverde.

Dit is wat ik heb gebruikt:

(function(){
$('.pijlrechts').on('click', function(){
$('#vergelijktable22').stop().animate({'margin-left':'-352px'})
});
})();

(function(){
$('.pijllinks').on('click', function(){
$('#vergelijktable22').stop().animate({'margin-left':'0'})
});

})();

Ik hoop dat iemand me hierbij kan helpen..

[rubenvanvliet]

Hier staat animate redelijk duidelijk uitgelegd:
http://api.jquery.com/animate/

Kijk even bij properties, want daar gaat het nu sowieso al mis.

[PlugInBeer]

Heel erg bedankt Ruben,

dom genoeg, heb ik die site niet eens gezien.

Het is me nu gelukt met de += en de -=.
Enige wat ik nu nog moet maken is dat het niet verder kan dan 0px of -1408px, en het knopje het niet meer doet op dat getal.

Zou iemand me daar wat over kunnen uitleggen misschien?

[Anoniem: 25065]

Met behulp van een if statement check je of de margin-left op de maximale of minimale waarde zit en aan de hand daarvan schakel je de knop aan of uit.

[PlugInBeer]

Ik wist dat het met een if moest, maar ik wist niet echt hoe ik het aan moest pakken. Ik heb wat research gedaan en verschillende if's geprobeerd maar niks blijkt te werken. Wat ik nu heb is:

if ($('#vergelijktable22').css('margin-left') >= '0px'){
$('.pijllinks').hide();
};

Maar hij pakt hem helemaal niet. Ik heb het ook geprobeerd met alerts, maar er gebeurt simpel weg niets. Heb ik iets fout gedaan?

[xzaz]

Kijk eens naar de return waarde van .css

tip: Firefox + Firebug

[ Voor 24% gewijzigd door xzaz op 27-09-2012 13:53 ]

[PlugInBeer]

Dat heb ik gedaan:

<table class="vergelijktable2" id="vergelijktable22" style="margin-left" -356px>…</table>

*de margin-left waarde past zich aan afhankelijk van welke knop ik druk*

Daarom snap ik ook niet waarom de code niet werkt, aangezien alles overeenkomt ...

[PlugInBeer]

Uiteindelijk na 3 dagen lang zoeken en proberen is het me eindelijk gelukt. Voor de mensen die willen weten wat ik heb gedaan:

$('.pijllinks').stop().click(function(){
if($('#vergelijktable22').css("margin-left")!='0px' ){
$('#vergelijktable22').stop().animate({'margin-left':'+=356px'})
}
});

$('.pijlrechts').stop().click(function(){
if($('#vergelijktable22').css("margin-left") !='-1424px' ){
$('#vergelijktable22').stop().animate({'margin-left':'-=356px'})
}
});

Damn.. dat lucht op zeg..

[Bosmonster]

Je hebt drie dagen gezocht om iets van links naar rechts te bewegen?

Anyway, die eerste stop() doet niks op deze manier. Dat is nog voor je uberhaupt het event bind.

[C0rnelis]

Bosmonster schreef op donderdag 27 september 2012 @ 16:59:
Je hebt drie dagen gezocht om iets van links naar rechts te bewegen?

Anyway, die eerste stop() doet niks op deze manier. Dat is nog voor je uberhaupt het event bind.

Als er een testcase op bijv. jsfiddle had gestaan, dan had je het effect van die stop() waarschijnlijk kunnen zien.
De stop() zit er waarschijnlijk in om al lopende animaties tot een halt te roepen in het geval dat je op .pijllinks of .pijlrechts klikt terwijl er een animatie bezig is.

edit:
Ik denk dat je gelijk hebt, die eerste stop() zal nooit iets doen omdat die wordt aangeroepen op .pijllinks en .pijlrechts en niet de animerende elementen.

http://jsfiddle.net/r4b8j/1/

[ Voor 15% gewijzigd door C0rnelis op 27-09-2012 23:25 ]

[PlugInBeer]

Bosmonster schreef op donderdag 27 september 2012 @ 16:59:
Je hebt drie dagen gezocht om iets van links naar rechts te bewegen?

Anyway, die eerste stop() doet niks op deze manier. Dat is nog voor je uberhaupt het event bind.

Niet om te laten bewegen dat was een paar min werk. Om het te laten stoppen zodat het niet verder kan aan het einde

En ik zal die eerste .stop even weghalen, bedankt