webentwicklung-frage-antwort-db.com.de

jQuery animiert von CSS "top" nach "bottom"

Ich möchte ein div-Element von einer absoluten oberen Position zu einer absoluten unteren Position beim Laden der Seite animieren.

Die folgende Kombination von CSS- und jQuery-Code kann nichts verschieben:

CSS

#line-three {
    position:absolute;
    width:100%;
    left:0px;
    top:113px;
}

jQuery

 $("#line-three").animate({
    bottom: "100px",
    }, 1200);

Danke für deine Hilfe!

BEARBEITEN:

Ich habe versucht, dies zu ändern (gemäß den Vorschlägen von graphicdevine), aber immer noch keine Zigarre:

var footerOffsetTop = $('#line-three').offset().bottom;
  $('#line-three').css({position:'absolute',top:'',bottom:footerOffsetTop})
  $("#line-three").delay(100).animate({
    bottom: '100px',
    }, 1200);
12
bravokiloecho

Ich fand schließlich eine Lösung ...

Grundsätzlich animieren Sie von der alten top-Position zu einer anderen Position auch relativ zu der top, die Sie berechnen, indem Sie die window-Höhe nehmen und (1) die gewünschte Position von der bottom abziehen, und (2) die Höhe des Elements, das Sie animieren möchten . Fügen Sie am Ende der Animation einen Callback hinzu, um die CSS zu ändern, damit sich das Element mit einem unteren Wert und einem oberen auto-Wert befindet

Hier ist das jQuery-Skript:

$('#click').click(function () {

    var windowHeight = $(window).height();
    var lineHeight = $('#line').height();
    var desiredBottom = 100;

    var newPosition = windowHeight - (lineHeight + desiredBottom);

    $('#line').animate({top:newPosition},1000,function () {
        $('#line').css({
            bottom: desiredBottom,
            top: 'auto'
        });
    });

});

Sie können es in diesem jsFiddle arbeiten sehen

11
bravokiloecho

Sie können top: auto mit der .css-Methode festlegen und dann animieren:

$(document).ready(function(){
   $("#line-three").css({top:'auto'});   
   $("#line-three").animate({bottom:'100px'}, 200)   
})

BEARBEITEN:

Sie können mit der Größe des Körpers/des Bildschirms spielen und die obere Position in die untere Position umwandeln und dann zur gewünschten unteren Position animieren:

$(document).ready(function(){
  var bodyHeight = $('body').height();
  var footerOffsetTop = $('#line-three').offset().top;
  var topToBottom = bodyHeight -footerOffsetTop;

  $('#line-three').css({top:'auto',bottom:topToBottom});
  $("#line-three").delay(100).animate({
    bottom: '100px',
  }, 1200); 

})

Beispiel: http://jsfiddle.net/reWwx/4/

5
davidmatas

Vielleicht würde das helfen?

$(document).ready( function() {
    var div = jQuery("#dvVertigo");

    div.animate({
           left: '0',    
                top: '+=' + ($(window).height()-20)               
            }, 5000, function () {
                // Animation complete.
            });
});

Vollständiger Code:

http://jsfiddle.net/yyankowski/jMjdR/

2
Yan Yankowski

Sie können den aktuellen unteren Wert über: css ('bottom') einstellen. Das funktioniert für mich (jQuery1.7.2):

$('#line-three').css({bottom:$('#line-three').css('bottom'), top:'auto'});
$('#line-three').animate({ bottom: position }, 250);
0
T. Christiansen

BEARBEITEN: musste schnell gehen, so dass ich nicht fertig wurde, entschied ich mich für jquery ui für das Beispiel (Sie benötigen Kern):

<html><head>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<style>
#line_three { width:100%; }
.line3_top {
    position:absolute;
    top:113px;
    left:0px;
}
.line3_btm {
    position:absolute;
    bottom:100px;
    left:0px;
}
</style>
<script type="text/javascript">
    var topbtm = true;
    $(document).ready(function(){
        $("#line_three").mouseenter(function(){
            if ( topbtm ) {
                $("#line_three").switchClass("line3_top","line3_btm",400);
            } else {
                $("#line_three").switchClass("line3_btm","line3_top",400);
            }
            topbtm = !topbtm;
        });
    });
</script>
</head><body>
<div id="line_three" class="line3_top">
    hello;
</div>
</body></html>

http://jsfiddle.net/syVzK/1/ (geänderter Kippschalter, um Überanimation zu verhindern)

Ich mag auch andere Vorschläge.

EDIT2: Gerade im IE getestet ... es funktioniert seltsam. Vielleicht gerade wegen ungeraden Verhaltens in IE mit Jquery UI-Switch-Klasse tun.

EDIT3:

Ok, ich habe das für IE und FF bekommen ... Einige Notizen. Die +20 soll das Springen verhindern. Der Test für innerHeight von 0 ist für den Fall, dass die Höhe für das Element (oder den Körper) nicht festgelegt ist. Wenn es sich also in einem Div befindet, das positioniert ist, legen Sie die Höhe fest.

Dieses funktionierte nicht in jsfiddle, sondern arbeitete auf einer regulären Webseite. Vermeiden Sie jsfiddle dafür.

    <script type="text/javascript">
var topbtm = 1,top3=113,btm3=100;
$(document).ready(function(){
    $("#line_three").mouseenter(function(){
        var ih = $(this).offsetParent().innerHeight();
        if (ih==0){ih=$(document).innerHeight();}
        if ( topbtm==1 ) {
            topbtm=-1;
            $("#line_three")
                .animate({"top":(ih-(btm3+20))}
                         ,500
                         ,function(){
                             $(this).css({"top":"auto","bottom":btm3});
                })
            topbtm=0;
        } else if ( topbtm==0 ) {
            topbtm=-1;
            $("#line_three")
                .animate({"bottom":(ih-(top3+20))}
                         ,500
                         ,function(){
                             $(this).css({"bottom":"auto","top":top3});
                })
            topbtm=1;
        }
    });
});
    </script>
0
craniumonempty

$("#line-three").css({position:'absolute',top:'auto',bottom:'100px'})

Das sollte es tun. Sie müssen wahrscheinlich den 'Top'-Wert auf auto zurücksetzen

EDIT

Zum Animieren müssen Sie .animate () verwenden.

Versuche dies:

$("#line-three").animate({position:'absolute',top:'auto',bottom:'100px'}, 400)

0
peduarte

Möglicherweise:

 $("#line-three").animate({position:'absolute',top:'auto',bottom:'100px'},1200)

BEARBEITEN

Ja, das wird schwieriger, als es zuerst erscheint. Möglicherweise müssen Sie die aktuelle Position relativ zum Container (mit offset) analysieren und von dort aus arbeiten.

0
graphicdivine

Wenn Sie animieren möchten, sollten Sie Folgendes tun:

$("#line-three").animate({
    top: "500px",
    }, 1200);

Geige hier: http://jsfiddle.net/nicolapeluchetti/xhHrh/

0

Sie können es mit diesem animieren: Schauen Sie sich dieses JSFiddle an:

$('#button').click(function(e){ // On click of something
    e.preventDefault(); // Prevent the default click aciton
    $("#line-three").animate({
        top: "300px",
    }, 1200);
});
0
Anil