从 CSS“顶部”到“底部”的 jQuery 动画
Posted
技术标签:
【中文标题】从 CSS“顶部”到“底部”的 jQuery 动画【英文标题】：jQuery animate from CSS "top" to "bottom" 【发布时间】：2012-01-21 01:10:48 【问题描述】：我希望在页面加载时将 div 元素从绝对顶部位置设置为绝对底部位置。
下面的 CSS 和 jQuery 代码的组合无法移动任何东西：
CSS
#line-three
position:absolute;
width:100%;
left:0px;
top:113px;
jQuery
$("#line-three").animate(
bottom: "100px",
, 1200);
感谢您的帮助！
编辑：
我试过把它改成这个（根据graphicdevine的建议）但仍然没有雪茄：
var footerOffsetTop = $('#line-three').offset().bottom;
$('#line-three').css(position:'absolute',top:'',bottom:footerOffsetTop)
$("#line-three").delay(100).animate(
bottom: '100px',
, 1200);
【问题讨论】：
好的，拿到代码了。抱歉之前不在，但不得不分开。 是的，该脚本适用于 FF，但未在 IE 中测试。我创建了另一个不使用 jquery ui，但必须进行一些调整才能使其正常工作。 offset().bottom 不存在，offset() 只返回 top 和 left 属性。 【参考方案1】：编辑：不得不快速离开所以没有完成，我决定使用 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/（更改了切换开关以防止过度动画）
我也喜欢其他一些建议。
EDIT2：刚刚在 IE 中测试过......它的工作方式很奇怪。由于 IE 中带有 Jquery UI 开关类的奇怪行为，可能不得不直接执行。
EDIT3：
好的，我得到了这个适用于 IE 和 FF 的工作......不过有一些注意事项。 +20 是为了防止它跳跃。测试 innerHeight 是否为 0 是在没有为元素（或主体）设置高度的情况下，因此如果它位于已定位的 div 中，则设置高度。
此外，这在 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>
【讨论】：
这不会产生动画，只是跳跃。 @negatron 我让它在 ie 和 ff 中工作（edit3），但无法让 offsetParent() 在 jsfiddle 中工作，因此必须在没有它的情况下对其进行测试。不确定是什么原因造成的，但目前不愿意追查。【参考方案2】：$("#line-three").css(position:'absolute',top:'auto',bottom:'100px')
应该这样做。您可能需要将“顶部”值重新设置为自动
编辑
要制作动画，需要使用 .animate();
试试这个：
$("#line-three").animate(position:'absolute',top:'auto',bottom:'100px', 400)
【讨论】：
差不多就行了，但不是创建动画滑下，而是突然跳到底部... 您的编辑现在等同于 graphicsdevine 的回答（上图）。不幸的是，这不起作用。【参考方案3】：可能：
$("#line-three").animate(position:'absolute',top:'auto',bottom:'100px',1200)
编辑
是的，这将比最初看起来更棘手。您可能需要分析它相对于容器的当前位置（使用offset）并从那里开始工作。
【讨论】：
感谢您的建议。我会调查的。关于如何开始使用偏移的任何明显建议？【参考方案4】：如果你想制作动画，你应该这样做：
$("#line-three").animate(
top: "500px",
, 1200);
在这里提琴：http://jsfiddle.net/nicolapeluchetti/xhHrh/
【讨论】：
【参考方案5】：您可以使用以下方法对其进行动画处理： 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);
);
【讨论】：
但这不位置是相对于页面底部没有？ 这将使 div 从其绝对位置动画 300px，无论是在哪里。所以在这种情况下，距离页面顶部 300px。因此，如果您想将其向下移动 100 像素，则将其向下移动 113 像素 + 100 像素，对不起，我理解您现在想要做什么。【参考方案6】：你可以用 .css 方法设置 top:auto 然后动画：
$(document).ready(function()
$("#line-three").css(top:'auto');
$("#line-three").animate(bottom:'100px', 200)
)
编辑：
您可以调整身体/屏幕的大小并将顶部位置转换为底部位置，然后动画到所需的底部位置：
$(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);
)
示例：http://jsfiddle.net/reWwx/4/
【讨论】：
但这会将它捕捉到底部并从那里开始动画。我正在寻找它从上到下移动... 从屏幕顶部到底部？还是相对于包含它的相对元素？ 这真是太聪明了，谢谢。唯一的问题是，如果浏览器大小发生变化，我认为动画不会从同一个起点（即 113 像素）开始... 嗯，您可以尝试设置 % 值而不是 px。类似顶部的东西：5%【参考方案7】：我最终想出了一个解决方案...
基本上，您从旧的top 位置动画到另一个位置，也相对于top，您通过获取window 高度并从bottom 中减去 (1) 所需位置和 ( 2）要设置动画的元素的高度。然后，在动画结束时添加一个回调来更改 css，以便元素定位到底部值和顶部 auto 值
这是 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'
);
);
);
You can see it working in this jsFiddle
【讨论】：
【参考方案8】：您可以通过：css('bottom') 设置当前的底部值。这对我有用（jQuery1.7.2）：
$('#line-three').css(bottom:$('#line-three').css('bottom'), top:'auto');
$('#line-three').animate( bottom: position , 250);
【讨论】：
【参考方案9】：也许这会有所帮助？
$(document).ready( function()
var div = jQuery("#dvVertigo");
div.animate(
left: '0',
top: '+=' + ($(window).height()-20)
, 5000, function ()
// Animation complete.
);
);
完整代码：
http://jsfiddle.net/yyankowski/jMjdR/
【讨论】：
以上是关于从 CSS“顶部”到“底部”的 jQuery 动画的主要内容，如果未能解决你的问题，请参考以下文章