[jquery] richting bepalen van een animate

[Verwijderd]

Ik wil 2 percentages ondersteunen door een staafdiagram die geanimeerd verschijnt.
Ik heb 2 images met height:0 en n.a.v. de percentages wordt de nieuwe hoogte bepaald

code:

  $('#imagePercentage1').animate({ height: Percentage1}, 1500);
   $('#imagePercentage1').animate({ height: Percentage2}, 1500);

Dit doet voor 99% wat ik wil, de staafdiagram (image) wordt middels een animatie groter n.a.v. het percentage.
Er is echter een maar, de image gaat wordt naar beneden groter, maar ik wil natuurlijk dat deze naar boven gaat.

Ik heb wel voorbeelden gezien dat een div omhoog komt, maar dat is middels een slideToggle().
Kan ik de animatie richting bepalen (ik vermoed van niet anders had ik dat wel op google gevonden) of moet ik een andere weg bewandelen om dit te realiseren?

Als work around kan ik altijd nog de width zetten, dan krijg je een horizontale bar, maar wil in 1e instantie een verticale bar.

[ Voor 7% gewijzigd door Verwijderd op 30-06-2009 08:18 ]

[Janoz]

Het enige dat de animate doet is het object groter maken. Dat het daardoor naar beneden groter wordt betekent alleen dat het object dat je groter maakt met de bovenkant absoluut gepositioneerd is of dat hij naar boven uitgelijnd is. Wil je zorgen dat de onderkant op dezelfde plek blijft staan dan zul je het object aan de onderkant vast moeten zetten.

[RobIII]

Janoz schreef op dinsdag 30 juni 2009 @ 08:28:
Wil je zorgen dat de onderkant op dezelfde plek blijft staan dan zul je het object aan de onderkant vast moeten zetten.

Of tijdens het groeien de Y positie evenredig met de groei corrigeren

[Verwijderd]

Janoz schreef op dinsdag 30 juni 2009 @ 08:28:
Het enige dat de animate doet is het object groter maken. Dat het daardoor naar beneden groter wordt betekent alleen dat het object dat je groter maakt met de bovenkant absoluut gepositioneerd is of dat hij naar boven uitgelijnd is. Wil je zorgen dat de onderkant op dezelfde plek blijft staan dan zul je het object aan de onderkant vast moeten zetten.

Daar had ik helemaal nog niet bij stil gestaan, dat is de oplossing inderdaad.
Thanks!

[Bosmonster]

RobIII schreef op dinsdag 30 juni 2009 @ 09:12:
[...]

Of tijdens het groeien de Y positie evenredig met de groei corrigeren

Dan kun je hem ook gewoon op bottom:0 zetten, dat scheelt een hoop gedoe Dan zou die ook gewoon naar boven moeten uitschuiven.

[ Voor 9% gewijzigd door Bosmonster op 30-06-2009 09:39 ]

[Verwijderd]

RobIII schreef op dinsdag 30 juni 2009 @ 09:12:
[...]

Of tijdens het groeien de Y positie evenredig met de groei corrigeren

De Y-positie van het div waar de image in zit bedoel je?

[RobIII]

Bosmonster schreef op dinsdag 30 juni 2009 @ 09:39:
[...]


Dan kun je hem ook gewoon op bottom:0 zetten, dat scheelt een hoop gedoe Dan zou die ook gewoon naar boven moeten uitschuiven.

Het was een beetje bedoeld als voorbeeld van "out-of-the-box" denken; er zijn situaties waarin dit soort truukjes handig (kunnen) zijn. Of dat voor TS het geval is weet ik niet.

[Verwijderd]

Bosmonster schreef op dinsdag 30 juni 2009 @ 09:39:
[...]


Dan kun je hem ook gewoon op bottom:0 zetten, dat scheelt een hoop gedoe Dan zou die ook gewoon naar boven moeten uitschuiven.

Bottom:0 met position:absolute dan!

[Bosmonster]

RobIII schreef op dinsdag 30 juni 2009 @ 09:41:
[...]

Het was een beetje bedoeld als voorbeeld van "out-of-the-box" denken; er zijn situaties waarin dit soort truukjes handig (kunnen) zijn. Of dat voor TS het geval is weet ik niet.

Synchroniseren van animaties blijft wel tricky, dus als je het kunt voorkomen dan zou ik het zeker doen.

In dit geval maakt het natuurlijk niet zoveel uit omdat ze altijd rechtevenredig aan elkaar verlopen.

Verwijderd schreef op dinsdag 30 juni 2009 @ 09:50:
[...]

Bottom:0 met position:absolute dan!

Uiteraard

[tonyisgaaf]

Bosmonster schreef op dinsdag 30 juni 2009 @ 09:55:
[...]
Synchroniseren van animaties blijft wel tricky, dus als je het kunt voorkomen dan zou ik het zeker doen.
[...]

Dat hangt er natuurlijk sterk vanaf of je de gesynchroniseerde animaties laat aansturen door één "Animator" of dat ze elk hun eigen Animator hebben die 'tegelijk' worden gestart.

In het laatste geval heb je absoluut gelijk.

edit: ik lees de TS opnieuw en snap dat je daarop doelt, zijn inderdaad twee losse animaties.

[ Voor 9% gewijzigd door tonyisgaaf op 30-06-2009 12:06 ]