我希望在页面加载时将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);
答案 0 :(得分:11)
我最终想出了一个解决方案......
基本上,您从旧的top
位置动画到相对于top
的另一个位置,您可以通过取window
高度并从中减去(1)所需的位置来计算bottom
,以及(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'
});
});
});
答案 1 :(得分:5)
您可以设置top:auto with .css方法,然后设置animate:
$(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);
})
答案 2 :(得分:2)
也许这会有所帮助?
$(document).ready( function() {
var div = jQuery("#dvVertigo");
div.animate({
left: '0',
top: '+=' + ($(window).height()-20)
}, 5000, function () {
// Animation complete.
});
});
完整代码:
答案 3 :(得分:0)
<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 中无效,但在常规网页上工作。为此,请避免使用。
<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>
答案 4 :(得分:0)
$("#line-three").css({position:'absolute',top:'auto',bottom:'100px'})
应该这样做。你可能需要留下顶级&#39;值为自动
修改强>
要设置动画,您需要使用.animate();
试试这个:
$("#line-three").animate({position:'absolute',top:'auto',bottom:'100px'}, 400)
答案 5 :(得分:0)
可能:
$("#line-three").animate({position:'absolute',top:'auto',bottom:'100px'},1200)
修改
是的,这比首次出现时要复杂一些。你可能需要分析它相对于它的容器的当前位置(使用offset
)并从那里开始工作。
答案 6 :(得分:0)
如果你想动画,你应该这样做:
$("#line-three").animate({
top: "500px",
}, 1200);
答案 7 :(得分:0)
您可以使用以下方法为其设置动画: 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);
});
答案 8 :(得分:0)
您可以通过以下方式设置当前最低值:css('bottom')。这对我有用(jQuery1.7.2):
$('#line-three').css({bottom:$('#line-three').css('bottom'), top:'auto'});
$('#line-three').animate({ bottom: position }, 250);