[JS + jQuery] animate laat niet volledige animatie zien.

[xehbit]

Hallo Tweakers,

Ik ben bezig met een klein expirimentje. Daarvoor wil een een contentbox laten resize dmv jQuery. Het werkt bijna precies zoals het moet werken maar wanneer ik op een button druk die de event .animate aanroept zie je het onderste gedeelte van de contentbox verdwijnen tot de animatie is afgelopen.

Hier een voorbeeld(demo) van wat ik bedoel: http://chat.kevinvdburgt.nl/

Ik heb verschillende dingen geprobeerd zoals het aanpassen van de CSS of andere effecten gebruiken (.fade werkt wel weer goed) Misschien dat iemand mij een tip kan geven waar het aan ligt en hoe het is op te lossen.

[MueR]

Je wil die footer absoluut positioneren tov je box. Je zou het ook makkelijker kunnen doen: Een enkele box met een border en border-radius.

[xehbit]

MueR schreef op woensdag 11 mei 2011 @ 17:25:
Je wil die footer absoluut positioneren tov je box. Je zou het ook makkelijker kunnen doen: Een enkele box met een border en border-radius.

Klopt, dit is een mogelijkheid. Maar de opdracht is om het met afbeeldingen te doen. Later moeten die ook vervangen kunnen worden. En het zijn dan niet altijd rechte of ronde hoeken meer. Soms wel eens een punt in de hoeken oid. Maar anders was het inderdaad wel gelukt ja.

[moozzuzz]

fyi: IE6x toont de onderste rand zelfs niet.

[Flowmo]

Het issue is dat jQuery er tijdens de animatie overflow:hidden op zet.

De middelste container heeft een height van 100%. Daardoor heeft die container dezelfde hoogte als zijn parent container. De parent container krijgt bv 400px hoogte, de middelste container dus ook. Omdat de div.frame_topbottom ook een hoogte heeft van 20px krijg je dus een hoogte van 20px + 100% + 20px. Hierdoor is de inhoud hoger dan de container en die valt dus weg door overflow:hidden.

Pas dus de hoogte van je middelste div aan en het zou moeten werken.