jQuery animate from CSS “top” to “bottom”

I'm looking to animate a div element from an absolute top position to an absolute bottom position on the page load.

The combination of CSS and jQuery code below fails to move anything:

CSS

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

jQuery

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

Thank you for your help!

EDIT:

I've tried changing it to this (as per graphicdevine's suggestions) but still no cigar:

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

I eventually came up with a solution...

Basically you animate from the old top position to another position also relative to to the top which you calculate by taking the window height and subtracting (1) the desired position from the bottom, and (2) the height of the element you want to animate. Then, at the end of the animation add a callback to change the css so as the element is then position with a bottom value and a top auto value

Here's the jQuery script:

$('#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'
        });
    });

});

You can see it working in this jsFiddle

davidmatas

You can set top:auto with .css method and then animate:

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

EDIT:

You can play with size of body/screen and convert top position to bottom position and then animate to the desired bottom 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);

})

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

Maybe this would help?

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

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

Full code:

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

If you want to animate you should do:

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

Fiddle here: http://jsfiddle.net/nicolapeluchetti/xhHrh/

You can animate it using this: Check out this JSFiddle:

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

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

That should do it. You probably need to reser the 'top' value to auto

EDIT

To animate, you need to use .animate();

Try this:

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

Possibly:

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

EDIT

Yes, this is going to be trickier than it first appears. You'll might need to analyse it's current position relative to it's container (using offset) and work from there.

EDIT: had to leave quickly so didn't get to finish, I decided to use jquery ui for the example (you need core):

<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/ (changed toggle switch to prevent over animation)

I like some other suggestions as well.

EDIT2: Just tested in IE... it works oddly. Maybe have to do straight because of odd behavior in IE with Jquery UI switch class.

EDIT3:

Ok, I got this working for IE and FF... Some notes though. The +20 is to keep it from jumping. The test for innerHeight of 0 is in case height isn't set for the element (or body), so if it's in an div that's positioned, then set height.

Also, this did not work in jsfiddle, but worked on a regular webpage. Avoid, jsfiddle for this.

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

You could set the current bottom value via: css('bottom'). This works for me (jQuery1.7.2):

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

来源：https://stackoverflow.com/questions/8518400/jquery-animate-from-css-top-to-bottom

标签

jquery

css

animation

jquery-animate