发表新帖
发表新帖

jQuery animate from CSS “top” to “bottom”

后端 未结
关注
9 1721
北海茫月
北海茫月 2021-01-04 06:49

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 fai

相关标签:
9条回答
  • 误落风尘
    2021-01-04 07:24

    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/

    0 讨论(0)
  • 暗喜
    2021-01-04 07:26

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

    0 讨论(0)
  • 清歌不尽
    2021-01-04 07:29

    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

    0 讨论(0)
  • 慢半拍i
    2021-01-04 07:32

    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/

    0 讨论(0)
  • 一向
    2021-01-04 07:33

    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>
    0 讨论(0)
  • 被撕碎了的回忆
    2021-01-04 07:39

    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.

    0 讨论(0)
 看不清?
提交回复
热议问题