• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

animate top/bottom

Status
Für weitere Antworten geschlossen.

kontafessor

Neues Mitglied
Hallo Freunde,

hab da eine kleine Schwierigkeit mit dem animieren eines divs mit Java.

Hier erst mal das CSS des divs:

Code:
#content_wrapper {
    z-index: 3;
    height:50%;
    width:100%;
    bottom:-50%;
    position:absolute;
}
Mit folgender Funktion wird das div beim laden der Seite von unten hoch animiert:

Code:
function contentInStartNewPage(URL){
    $("#content_wrapper").animate({
        bottom: 52
        },"slow");
}
Dies funktioniert in allen Browsern einwandfrei.

Nun kommen wir zum Problem:

Durch das klicken eines Buttons wird das div wieder bis zu der position contentstop nach unten animiert.

Code:
var $docheight = $(window).height();
    var $contentstop = $docheight - 52;

$("#content_wrapper").animate({
        top: $contentstop
        },"slow");
Dies funktioniert nur im Firefox wie vorgesehn. Andere Browser haben folgendes Problem:

Sie lassen die Animation nicht ab der Position beginnen zu welcher das div hoch-animiert wurde (bottom: 52), sondern starten die Animation ganz oben bei top:0 sozusagen.
Hierdurch entsteht natürlich ein unschöner Sprung.

Die Problematik liegt anscheinen darin, dass die erste Animation am bottom und die zweite am top ausgerichtet ist. Ich muss es aufgrund der relativen Positionierung des divs jedoch so machen.

Ich bedanke mich bei jedem Leser und freue mich über jede Antwort!
 
Wenn ich mich recht erinnere ist der vierte Parameter der animate-Funktion eine Funktionsanweisung, was nach erfüllen von animate stattfinden soll.

Demzufolge kannst du diesen mit
Code:
function(){
$("#content_wrapper").css("bottom","52");
}
befüllen, um die CSS-Eigenschaft bottom festzulegen.

---->
Code:
function contentInStartNewPage(URL){
    $("#content_wrapper").animate({
        bottom: 52
        },"slow", "swing",
        function(){
            $("#content_wrapper").css("bottom","52");
        }
);
}
 
löst leider das problem nicht. will ich das div hiermit runterfahren

Code:
$("#content_wrapper").animate({
        top: $contentstop
        },"slow");

startet die animation noch immer bei top:0 und nicht bei bottom:52.
 
Status
Für weitere Antworten geschlossen.
Zurück
Oben