jQuery animate from CSS “top” to “bottom”

2019-02-12 09:02发布

站内文章 / jQuery
31 0 0

问题:

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

回答1:

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



回答2:

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/



回答3:

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/



回答4:

If you want to animate you should do:

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

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



回答5:

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


回答6:

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



回答7:

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.



回答8:

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>


回答9:

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


标签： jquery css animation jquery-animate
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~