我有一堆绝对定位的图片,我想点击一个按钮,让它们动画到它们在页面上通常应该出现的相对位置。
那么,在jQuery中从position:absolute到position:relative是否可能实现动画效果?
这是我的代码:
$(".change_layout").click(function(){
$(".book_img").animate({position:'relative', top:'0px', left:'0px'}, 1000)
})
我有一堆绝对定位的图片,我想点击一个按钮,让它们动画到它们在页面上通常应该出现的相对位置。
那么,在jQuery中从position:absolute到position:relative是否可能实现动画效果?
这是我的代码:
$(".change_layout").click(function(){
$(".book_img").animate({position:'relative', top:'0px', left:'0px'}, 1000)
})
$('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');
});
});
虽然有点取巧,但它应该可以工作。
position()
,而不是 offset()
。 - SLakseach
循环,您可逐个处理每张图片。您可能正在选择一个声明中的所有元素(您的 var el
大致是 $('img.foo')
),这会使所有操作相对于第一张图像。我已更新我的帖子以显示此内容。 - Tatu Ulmanen我喜欢Tatu的解决方案,但是我发现这段可重用代码更适合我的需求:
function specialSlide(el, properties, options){
//https://dev59.com/dXE95IYBdhLWcg3wrP-w#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);
}
var props = {'top' : 200, 'left' : 300};
var options = {'duration': 1000};
specialSlide($('#elementToMove'), props, options);
我认为你无法做到那样。jQuery animate 仅适用于任何“数字CSS属性”。
不行。
但是,您可以检查元素的当前位置(调用.position()
),将position
设置为relative
,并从原始位置动画到当前位置。
$(".change_layout").click(function(){
$(".book_img").css({'position': 'relative'}).animate({top:'0px', left:'0px'}, 1000)
})
相对定位(relative)
而不是静态定位(static)
吗? 因为静态定位(static)
是默认的。 - Tatu Ulmanen