jQuery的CSS从＆QUOT动画;顶＆QUOT;到＆QUOT;底部＆QUOT; [英] jQuery animate from CSS "top" to "bottom"

问题描述

我期待从绝对顶部位置的div元素动画在页面加载一个绝对的底部位置。

CSS和jQuery code以下的组合不能移动任何东西：

CSS

 ＃线三{
    位置：绝对的;
    宽度：100％;
    左：0像素;
    顶：113px;
}
 

jQuery的

  $（＃线三）。动画（{
    底部：100像素，
    }，1200）;
 

感谢您的帮助！

编辑：

我试着将其更改为这个（每graphicdevine的建议，），但仍没有雪茄：

。

  VAR footerOffsetTop = $（'＃线三'）偏移（）底部;
  $（'＃线三'）的CSS（{位置：绝对，顶：''，底部：footerOffsetTop}）
  $（＃线三）。延迟（100）.animate（{
    底部：100像素，
    }，1200）;
 

解决方案

我终于想出了一个解决方案...

基本上你就从了顶位置动画到另一个位置也相对到顶：可通过计算服用窗口的高度和减去（1）从底所需的位置，和（2）的高度元素要进行动画处理。然后，在动画的末尾添加一个回调更改CSS这样的元素，然后用底值和顶部位置汽车值

下面是jQuery的脚本：

  $（'＃点击'）。点击（函数（）{    变种WINDOWHEIGHT = $（窗口）.height（）;
    。VAR lineHeight是= $（'＃线）的高度（）;
    VAR desiredBottom = 100;    VAR在newPosition = WINDOWHEIGHT  - （lineHeight是+ desiredBottom）;    $（'＃线），动画（{顶部：在newPosition}，1000，函数（）{
        $（'＃线）。CSS（{
            底部：desiredBottom，
            顶部：自动
        }）;
    }）;}）;
 

你可以看到它在这的jsfiddle 工作

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

这篇关于jQuery的CSS从＆QUOT动画;顶＆QUOT;到＆QUOT;底部＆QUOT;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！