jquery：我可以将 position:absolute 动画化为 position:relative 吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2202749/
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: can i animate the position:absolute to position:relative?
提问by ExodusNicholas
i have a bunch of images that are positioned absolutely, i want to be able to click a button and have them all animate to where they would normally be on the page if they had the position: relative.
我有一堆绝对定位的图像，我希望能够单击一个按钮并让它们全部动画到它们通常在页面上的位置，如果它们具有位置：相对。
so is it even possible to animate from position:absolute to position:relative in jquery?
那么甚至可以在jquery中从位置：绝对到位置：相对动画？
this is what i have:
这就是我所拥有的：
$(".change_layout").click(function(){
$(".book_img").animate({position:'relative', top:'0px', left:'0px'}, 1000)
})
回答by Tatu Ulmanen
No, you cannot animate it directly but you can find out the end point and animate the position there. Something like this might work when animation to the staticposition:
不，您不能直接为其设置动画，但您可以找出终点并为那里的位置设置动画。当动画到static位置时，这样的事情可能会起作用：
$('img.foo').each(function() {
var el = $(this);
// Make it static
el.css({
visibility: 'hidden', // Hide it so the position change isn't visible
position: 'static'
});
// Get the static position
var end = el.position();
// Turn it back to absolute
el.css({
visibility: 'visible', // Show it
position: 'absolute'
}).animate({ // Animate to the static position
top: end.top,
left: end.left
}, function() { // Make it static
$(this).css('position', 'static');
});
});
It's a bit hacky, but it should work.
这有点hacky，但它应该可以工作。
回答by rosscj2533
回答by SLaks
No.
不。
However, you could check the element's current location (call .position()), set the positionto relative, and animate from the original location to the current one.
但是，您可以检查元素的当前位置（调用.position()），将 设置position为relative，然后从原始位置动画到当前位置。
回答by Ryan
I like Tatu's solution but found this reusable code to be better for my purposes:
我喜欢 Tatu 的解决方案，但发现这个可重用的代码更适合我的目的：
function specialSlide(el, properties, options){
//http://stackoverflow.com/a/2202831/
el.css({
visibility: 'hidden', // Hide it so the position change isn't visible
position: 'static'
});
var origPos = el.position();
el.css({
visibility: 'visible', // Unhide it (now that position is 'absolute')
position: 'absolute',
top: origPos.top,
left: origPos.left
}).animate(properties, options);
}
Let's say I want to slide $('#elementToMove') to a new position, and I want it to take 1000 milliseconds to move. I can call this:
假设我想将 $('#elementToMove') 滑动到一个新位置，并且我希望它移动 1000 毫秒。我可以这样称呼：
var props = {'top' : 200, 'left' : 300};
var options = {'duration': 1000};
specialSlide($('#elementToMove'), props, options);
回答by Muhammad Russell
You can try the css method to make it relative and then animate.
您可以尝试使用 css 方法使其相对，然后进行动画处理。
$(".change_layout").click(function(){
$(".book_img").css({'position': 'relative'}).animate({top:'0px', left:'0px'}, 1000)
})
