jQuery animieren von CSS "oben" nach "unten"

Ich bin auf der Suche zu animieren, ein div-element aus eine absolute top-position zu einer absoluten unteren position auf der Seite zu laden.

Die Kombination von CSS und jQuery code unten nicht bewegt etwas:

CSS

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

jQuery

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

Danke für Eure Hilfe!

EDIT:

Ich habe versucht, es zu diesem (wie pro graphicdevine den Kommentaren), aber 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);

ok, hab den code. Sorry war nicht früher, sondern hatte sich zu trennen.
Ja, das scripted arbeitete für FF, aber nicht getestet im IE. Ich erschuf einen anderen, der nicht mit jquery ui, aber hatte zu tun, einige Optimierungen machen, damit es funktioniert.
offset().Unterseite nicht existiert, offset() nur die Renditen Eigenschaften top und left.

InformationsquelleAutor bravokiloecho | 2011-12-15

11

Kam ich irgendwann auf eine Lösung...

Grundsätzlich Sie animieren, von der alten top position zu einer anderen position relativ zu der top die Sie berechnen, indem Sie die window Höhe und Subtraktion (1) die gewünschte position aus der bottom, und (2) die Höhe von dem element, das Sie animieren möchten. Dann, am Ende der animation fügen Sie einen Rückruf zu ändern, die css-also als das element ist dann die position mit einem unteren Wert und einem oberen auto Wert

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 sehe es in diesem jsFiddle

InformationsquelleAutor bravokiloecho
5

Können Sie mit der set-top:auto mit .css-Methode und dann animieren:
```
$(document).ready(function(){
   $("#line-three").css({top:'auto'});   
   $("#line-three").animate({bottom:'100px'}, 200)   
})
```
EDIT:

Spielst du mit der Größe des Körpers/Bildschirm und konvertieren top-position nach unten positionieren und animieren Sie dann auf die gewünschte untere position:
```
$(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/

Aber dies dann schnappt Sie es auf den Boden und belebt es von dort. Ich bin auf der Suche nach Bewegung von oben nach unten...
Von oben nach unten auf dem Bildschirm? Oder hinsichtlich der relativen element, enthält es?
Mit Bezug auf dem Bildschirm.
siehe mein edit, hoffe, dass ist hilfreich
Das ist wirklich clever, danke. Das problem ist nur, dass ich nicht glaube, dass die animation startet am gleichen Ausgangspunkt (ie, 113px), wenn die browser-Größe ändert...

InformationsquelleAutor davidmatas

Vielleicht würde dies helfen?

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

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

Vollständige code:

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

InformationsquelleAutor Yan Yankowski

0

Wenn Sie wollen, animieren Sie tun sollten:
```
$("#line-three").animate({
    top: "500px",
    }, 1200);
```
Fiddle hier: http://jsfiddle.net/nicolapeluchetti/xhHrh/

Du solltest die Frage nochmal Lesen 😉

InformationsquelleAutor Nicola Peluchetti
0

Animieren Sie es mit diesem:
Überprüfen Sie heraus dieses JSFiddle:
```
$('#button').click(function(e){ //On click of something
    e.preventDefault(); //Prevent the default click aciton
    $("#line-three").animate({
        top: "300px",
    }, 1200);
});
```
Das bedeutet aber nicht, die position wird relativ zum unteren Rand der Seite nicht?
Dies animiert den div 300px aus seiner absoluten position, wo immer das ist. Also in diesem Fall 300px vom oberen Rand der Seite. Also, wenn Sie wollte, um es nach unten 100px, Sie würde unten verschieben 113px + 100px, sorry, my bad, ich verstehe, was Sie nun tun möchte.
Ja, es ist schwierig! Aber vielen Dank für deine Zeit.

InformationsquelleAutor Anil
0

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

Das sollte es tun. Sie wahrscheinlich brauchen, um Bedenken Sie die " top " - Wert auf auto

BEARBEITEN

Animieren, die Sie verwenden müssen .animieren();

Versuchen Sie dies:

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

Dass fast tut es, aber eher als bei der Erstellung einer animierten dia-down-es ist nur plötzlich springt zu Boden...
Schau mein edit
Ihre Bearbeitung entspricht nun graphicdevine Antwort (oben). Und das funktioniert nicht, leider.

InformationsquelleAutor peduarte
0

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

Ja, das wird kniffliger, als es zunächst scheint. Sie müssen möglicherweise analysieren Sie die derzeitige position relativ zum er-container (mit offset) und von dort aus arbeiten.

Hmm. Das scheint nicht, etwas zu tun...
Danke für die Anregung. Ich werde das prüfen. Offensichtliche Vorschläge, wie zu beginnen, Verwendung von offset?
siehe mein edit. irgendwelche Vorschläge?

InformationsquelleAutor graphicdivine

EDIT: hatte zu verlassen, so schnell nicht fertig, ich habe mich für jquery ui-Beispiel (Sie brauchen 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ändert Kippschalter zu verhindern, über die animation)

Ich wie einige andere Vorschläge auch.

EDIT2: Gerade getestet in IE... es funktioniert komischerweise. Vielleicht haben Sie zu tun, gerade weil der merkwürdiges Verhalten im IE mit Jquery UI-Schalter-Klasse.

EDIT3:

Ok, ich habe diese Arbeit für IE und im FF... Einige Hinweise. Die +20 zu halten, ist es von springen. Der test für innerHeight 0 ist im Falle Höhe nicht für das element gesetzt ist (oder Körper), also, wenn es in ein div, positioniert ist, dann set Höhe.

Auch diese funktionierte nicht in jsfiddle, arbeitete aber auf einer regulären Webseite. Vermeiden Sie, jsfiddle.

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

Diese produziert keine animation, nur ein Klick.
Ich habe es funktioniert (edit3) in ie und ff, aber nicht bekommen konnte offsetParent (), um die Arbeit in jsfiddle, es muss also geprüft werden, ohne dass es. Nicht sicher, was wirft es Weg, aber nicht bereit, zu verfolgen, down im moment.

InformationsquelleAutor craniumonempty

0

Können Sie den aktuellen Wert unten über: css('bottom'). Dies funktioniert für mich (jQuery1.7.2):
```
$('#line-three').css({bottom:$('#line-three').css('bottom'), top:'auto'});
$('#line-three').animate({ bottom: position }, 250);
```
InformationsquelleAutor T. Christiansen

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.