[jQuery] Animate()-Problem

[PseudoPsycho]

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

$('#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!

[Mikesch01]

Hi,

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

Also hier ist deine aktuelle Funktion

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:

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

[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.

[boxxiebabee]

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:

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

Vielleicht noch nen stop() reinhauen.

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

Getestet mit Firebug und funktioniert.

[PseudoPsycho]

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

Originally Posted by boxxiebabee

Den Hüpf-Effekt will er ja nicht

Genau richtig.

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.