Question

更新2

我明白了。如果有人有类似的问题，请参阅我的回答。

更新

发表

我正在使用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;
}

然后我在pageload上保存他们的位置，因为我必须操纵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或''，但在DOM检查器中始终为0px。如果设置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;
    }); 
});

Answer 1

好的，我明白了。我必须检查元素是否具有已定义的top位置。如果没有，我必须使用较大的bottom值隐藏它。

请参阅：http://jsfiddle.net/gg33z/1/

Answer 2

试试这个：

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

这应该取消“顶级”值。

动画css属性：从“顶部”到“底部”

2 个答案: