1

更新 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属性。有些元素只有下边距。我试图设置topautoor '',但它总是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;
    }); 
});
4

2 回答 2

1

好的,我想通了。我必须检查元素是否有定义的top位置。如果没有,我必须以很大的bottom价值隐藏它。

见:http: //jsfiddle.net/gg33z/1/

于 2012-10-29T11:24:55.893 回答
0

试试这个:

$(element).css('top', '');

这应该取消设置“顶部”值。

于 2012-10-29T10:46:56.670 回答