jQuery 动画从 CSS“顶部”到“底部”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8518400/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery animate from CSS "top" to "bottom"
提问by bravokiloecho
I'm looking to animate a div element from an absolute top position to an absolute bottom position on the page load.
我希望在页面加载时将 div 元素从绝对顶部位置动画到绝对底部位置。
The combination of CSS and jQuery code below fails to move anything:
下面的 CSS 和 jQuery 代码的组合无法移动任何东西：
CSS
CSS
#line-three {
position:absolute;
width:100%;
left:0px;
top:113px;
}
jQuery
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:
我试过把它改成这个（根据graphicdevine的建议）但仍然没有雪茄：
var footerOffsetTop = $('#line-three').offset().bottom;
$('#line-three').css({position:'absolute',top:'',bottom:footerOffsetTop})
$("#line-three").delay(100).animate({
bottom: '100px',
}, 1200);
采纳答案by bravokiloecho
I eventually came up with a solution...
我终于想出了一个解决方案......
Basically you animate from the old topposition to another position also relative to to the topwhich you calculate by taking the windowheight 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 autovalue
基本上，您从旧top位置动画到另一个位置也相对于top您通过获取window高度并从 中减去 (1) 所需位置bottom和 (2) 要设置动画的元素的高度来计算的位置。然后，在动画结束时添加一个回调来改变 css，这样元素就会被定位到一个底部值和一个顶部auto值
Here's the jQuery script:
这是 jQuery 脚本：
$('#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'
});
});
});
回答by davidmatas
You can set top:auto with .css method and then animate:
您可以使用 .css 方法设置 top:auto，然后设置动画：
$(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/
回答by Yan Yankowski
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:
完整代码：
回答by T. Christiansen
You could set the current bottom value via: css('bottom'). This works for me (jQuery1.7.2):
您可以通过以下方式设置当前底部值：css('bottom')。这对我有用（jQuery1.7.2）：
$('#line-three').css({bottom:$('#line-three').css('bottom'), top:'auto'});
$('#line-three').animate({ bottom: position }, 250);
回答by craniumonempty
EDIT: had to leave quickly so didn't get to finish, I decided to use jquery ui for the example (you need core):
编辑：必须快速离开所以没有完成，我决定使用 jquery ui 作为示例（您需要核心）：
<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)
http://jsfiddle.net/syVzK/1/（更改切换开关以防止过度动画）
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.
EDIT2：刚刚在 IE 中测试...它的工作很奇怪。由于 IE 中使用 Jquery UI 开关类的奇怪行为，可能不得不直接做。
EDIT3:
编辑3：
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.
好的，我让这个为 IE 和 FF 工作......不过有一些注意事项。+20 是为了防止它跳跃。innerHeight 为 0 的测试是在没有为元素（或主体）设置高度的情况下，因此如果它位于已定位的 div 中，则设置高度。
Also, this did not work in jsfiddle, but worked on a regular webpage. Avoid, jsfiddle for this.
此外，这在 jsfiddle 中不起作用，但在常规网页上起作用。避免，jsfiddle为此。
<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>
回答by peduarte
$("#line-three").css({position:'absolute',top:'auto',bottom:'100px'})
$("#line-three").css({position:'absolute',top:'auto',bottom:'100px'})
That should do it. You probably need to reser the 'top' value to auto
那应该这样做。您可能需要将 'top' 值重新设置为 auto
EDIT
编辑
To animate, you need to use .animate();
要制作动画，您需要使用 .animate();
Try this:
尝试这个：
$("#line-three").animate({position:'absolute',top:'auto',bottom:'100px'}, 400)
$("#line-three").animate({position:'absolute',top:'auto',bottom:'100px'}, 400)
回答by graphicdivine
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.
是的，这将比最初看起来更棘手。您可能需要分析它相对于它的容器的当前位置（使用offset）并从那里开始工作。
回答by Nicola Peluchetti
If you want to animate you should do:
如果你想制作动画，你应该这样做：
$("#line-three").animate({
top: "500px",
}, 1200);
Fiddle here: http://jsfiddle.net/nicolapeluchetti/xhHrh/
回答by Anil
You can animate it using this: Check out this JSFiddle:
您可以使用此动画： 查看此 JSFiddle：
$('#button').click(function(e){ // On click of something
e.preventDefault(); // Prevent the default click aciton
$("#line-three").animate({
top: "300px",
}, 1200);
});
