更新 2
我想到了。如果有人有类似的问题,请参阅我的回答。
更新
jsFiddle:http: //jsfiddle.net/HBUAx/
邮政
我正在使用 jQuery 制作一些动画。我有 3-4 个元素应该从顶部滑入。我用 css 定义了他们的位置:
#element-1 {
top:124px;
left:0px;
right:auto;
bottom:auto;
}
#element-2 {
top:230px;
left:670px;
right:auto;
bottom:auto;
}
#element-3 {
top:auto;
left:0px;
right:auto;
bottom:100px;
}
然后我在页面加载时保存他们的初始位置,因为我必须操纵 css 值来
top: -1000px
隐藏它们并使“从顶部滑入”动画成为可能。
var image_margins = [];
$('img').each(function() {
var obj = $(this),
id = obj.attr('id'),
mtop = obj.css('top'),
mleft = obj.css('left'),
mright = obj.css('right'),
mbottom = obj.css('bottom');
// save alle margins in array
image_margins[id] = {mtop:mtop,mleft:mleft,mright:mright,mbottom:mbottom};
// hide all content elements
obj.css({'top':'-1000px'});
});
当用户单击动画按钮时,元素应该滑动到它们保存的位置。问题:我无法删除该top
属性。有些元素只有下边距。我试图设置top
为auto
or ''
,但它总是0px
在 DOM 检查器中。如果设置bottom
则不工作。top
我怎样才能摆脱这个top
属性?
$('.button').click(function(){
$('img').each(function() {
var image = $(this),
id = image.attr('id'),
timeout = 0;
setTimeout(function() {
var mtop, mleft, mright, mbottom;
if (image_margins[id].mtop != 'auto') { mtop = image_margins[id].mtop; } else { mtop = ''; }
if (image_margins[id].mleft != 'auto') { mleft = image_margins[id].mleft; } else { mleft = ''; }
if (image_margins[id].mright != 'auto') { mright = image_margins[id].mright; } else { mright = ''; }
if (image_margins[id].mbottom != 'auto') { mbottom = image_margins[id].mbottom; } else { mbottom = ''; }
image.animate({'top':mtop,'left':mleft,'right':mright,'bottom':mbottom},500);
},timeout);
timeout = timeout + 200;
});
});