CODEWITHSUNDEEP
jquerycssanimationjquery-animate
bravokiloecho
bravokiloecho

Reputation: 1463

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

Upvotes: 13

Views: 83915

Answers (9)

davidmatas
davidmatas

Reputation: 1881

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/

Upvotes: 5

bravokiloecho
bravokiloecho

Reputation: 1463

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

Upvotes: 12

Yan Yankowski
Yan Yankowski

Reputation: 454

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/

Upvotes: 2

T. Christiansen
T. Christiansen

Reputation: 1038

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

Upvotes: 0

craniumonempty
craniumonempty

Reputation: 3535

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>

Upvotes: 0

graphicdivine
graphicdivine

Reputation: 11211

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.

Upvotes: 0

peduarte
peduarte

Reputation: 1677

$("#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)

Upvotes: 0

Anil
Anil

Reputation: 21910

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);
});

Upvotes: 0

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76880

If you want to animate you should do:

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

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

Upvotes: 0

Related Questions