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>