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問題：属性を削除できません。一部の要素には下マージンしかありません。またはに設定しようとしましtopたが、常にDOMインスペクターにあります。そして、が設定されている場合は動作しません。属性を削除するにはどうすればよいですか？auto''0pxbottomtoptop

$('.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', '');

これにより、「top」値の設定が解除されます。

于 2012-10-29T10:46:56.670 に答える