jQuery Animate 頂部（從下到上）

Question

我正在嘗試為 Div a top:275設置動畫。

我試過.animate( {marginTop: -820 }但在每個屏幕上它最終會出現在不同的位置.animate( {marginTop: -820 }

所以我將 marginTop 更改為.animate( {top: 275}但 div 是從上到下 (slidedown)。請注意，所以我可以使用animate:top我必須將 div 設置為position:absolute在動畫片。 。 。

是否有任何技巧可以使頂部從底部向上或使 marginTop 在每個屏幕分辨率上與頂部的距離相同？ （我認為 margintop 無法解決，因為我將 margin top 設置為 -820 以獲得 top:275 的點，因此屏幕高度小於 1200px，div 會高得多......）

這是我的代碼：

$("#features").fadeIn()
            .css({
                position: 'absolute'
            }).animate({
                top: '275'
            }, function() { //callback });

Answer 1

啊找到了！！

$("#features").fadeIn()
.css({top:1000,position:'absolute'})
.animate({top:275}, 800, function() {
    //callback
});

所以基本上我已經在最后將 css 的頂部設置為 1000，然后將其動畫設置為 275，這是向上的...

Answer 2

$( '#features' ).show()
.css( {'opacity': 0, 'bottom': '-100px' } )
.animate( { 'opacity': '1', 'bottom' : 0 }, 1000 );

Answer 3

 $("#btn-auto-refresh").show() .css({ 'opacity': 0, 'bottom': '-100px' }) .animate({ 'opacity': '1', 'bottom': '100px' }, 1000);

 body{ min-height:1800px; } .auto-refresh-Div-position { display: flex; justify-content: center; } .btn-auto-refresh { border: none; color: white; padding: 5px; border-radius: 22px; width: 36%; z-index: 1; bottom:-100px; position:fixed; } .bgblue { background-color: #37A6E1; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <div class="auto-refresh-Div-position"> <button class="pf bgblue btn-auto-refresh " id="btn-auto-refresh" style="display:none"><i class="ico ico-spinner11"></i><span class="ml10">New Deals</span></button> </div>