[jQuery] Animate()-Problem

06/18/2012 22:41 PseudoPsycho#1

Hallo, Leute!
Ja, sogar ich brauche Hilfe. :D
Und zwar wollte ich einen Container auf Knofdr�ck aus-/einfahren lassen.
Sprich, etwas in der Art:

HTML Code:

$('#chatbox').animate({'height':'+=50'}, 400);

Die H�he verringern klappt problemlos, vergr��ern nicht.
Bei obigem Beispiel wird die H�he zun�chst verkleinert und erst dann vergr��ert. Das sieht ein wenig so aus, als w�rde der untere Rand "h�pfen".
Allerdings ist dies nicht mehr der Fall, wenn ich die Style-Angaben padding & border f�r das Element entferne.

Davon betroffen ist diese Seite (#Link enfernt).
Ihr m�sst euch jedoch einloggen, damit ihr die Chatbox zu sehen bekommt.
Dies k�nnt ihr mit diesen Daten tun:
#Test-Account gel�scht.
Schonmal danke im Vorraus! :)

06/18/2012 23:10 Mikesch01#2

Hi,

ich hoff ich kann dir mal helfen, bin eig. da nicht so talentiert ;D

Also hier ist deine aktuelle Funktion

Code:

function resizeChat(e){
$('#chatbox').animate({'height':e+'=50'}, 400);
$('#chat_content').animate({'height':e+'=50'}, 400); }

Wenn ich ein '+' eingebe, wird die
Chatbox zu height = height + 50 und
chat_content zu height = height + 50 (warum hier das Bild springt ist mir unklar, da er zwei mal in die selbe Richtung schiebt).

Bei Minus macht er einfach das gleiche nur umgekehrt.

Hier ist meine Logik:

Code:

function resizeChat(e){
$('#chatbox').animate({'height':e-'=50'}, 400);
$('#chat_content').animate({'height':e+'=100'}, 400); }

Chatbox wird bei '+' zu height = height - 50 (also schiebt nach oben) und
chat_content zu height = height + 100 (also schiebt wieder zum Ursprung und dann nach unten)

Bei '-' wird Chatbox zu height = height + 50 (schiebt nach unten) und
chat_content zu height = height - 100 (schiebt zum Ursprung und dann nach oben)

Hoffe ich konnte dir damit i-wie helfen ;)

06/18/2012 23:30 Fratyr#3

Einfach extrem umst�ndlich wie du das anstellst wenn du einen H�pf-Effekt erzielen willst solltest du dir einmal anschauen was easing ist, jQuery unterst�tzt das n�mlich als dritten Parameter in der animate Funktion. Auserdem solltest du pr�fen das die H�he nicht unter einen gewissen Punkt fallen kann, sonst kommts mal vor das der User die Chatbox ausversehen komplett versteckt ohne das die Elemente die zur Vergr��erung dienen zug�nglich sind.

06/18/2012 23:38 boxxiebabee#4

Quote:

Originally Posted by Fratyr

Einfach extrem umst�ndlich wie du das anstellst wenn du einen H�pf-Effekt erzielen willst solltest du dir einmal anschauen was easing ist, jQuery unterst�tzt das n�mlich als dritten Parameter in der animate Funktion. Auserdem solltest du pr�fen das die H�he nicht unter einen gewissen Punkt fallen kann, sonst kommts mal vor das der User die Chatbox ausversehen komplett versteckt ohne das die Elemente die zur Vergr��erung dienen zug�nglich sind.

Den H�pf-Effekt will er ja nicht ;)

Edit: So, habs mir mal kurz angeguckt.
Schneller fix:
Von der (id)Chatbox die h�he auf Auto stellen bzw. rausnehmen.

JQuery sieht dann so aus:

Code:

function resizeChat(e) {
    var a = $('#chat_content');
    if (a.height() >= 120 || e == '+') {
        a.animate({
            'height': e + '=50'
        }, 400);
    }
}

Vielleicht noch nen stop() reinhauen.

Code:

a.stop().animate({
     'height': e + '=50'
}, 400);

Getestet mit Firebug und funktioniert.

06/19/2012 14:10 PseudoPsycho#5

Quote:

Originally Posted by Fratyr

Auserdem solltest du pr�fen das die H�he nicht unter einen gewissen Punkt fallen kann, sonst kommts mal vor das der User die Chatbox ausversehen komplett versteckt ohne das die Elemente die zur Vergr��erung dienen zug�nglich sind.

hatte ich vor, einzubauen, sobald das Problem gel�st ist :P
Hat boxxie ja schon direkt mit eingebaut :D

Quote:

Originally Posted by boxxiebabee

Den H�pf-Effekt will er ja nicht ;)

Genau richtig. :D

Quote:

Getestet mit Firebug und funktioniert.

Ok, DANKE! Funktioniert bei mir auch.
Die Logik von jQuery ist mir in diesem Punkt etwas unverst�ndlich, soll mir aber recht sein. Funktioniert ja jetzt. :)