jQuery Animate 顶部（从下到上）答案

【问题标题】：jQuery Animate top (From bottom to top)jQuery Animate 顶部（从下到上）
【发布时间】：2011-12-23 00:53:18
【问题描述】：

我正在尝试为 top:275 的 Div 设置动画。

我尝试了.animate( {marginTop: -820 }，但在每个屏幕上它最终都位于不同的位置。 . .

所以我将 marginTop 更改为 .animate( {top: 275} 但 div 从上到下（向下滑动）。请注意，所以我可以使用animate:top，我必须在动画期间将 div 设置为position:absolute。 . .

是否有任何技巧可以让顶部从下向上或让 marginTop 在每个屏幕分辨率上与顶部的距离相同？（我认为 margintop 无法解决，因为我将 margin top 设置为 -820 以达到 top:275 的位置，因此屏幕小于 1200px 高度，div 会更高...）

这是我的代码：

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

【问题讨论】：

标签： javascript jquery css jquery-animate

【解决方案1】：

啊，找到了！！

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

所以基本上我已经将最末尾的 css 的顶部设置为 1000，然后将其动画设置为 275，这是向上的......

【讨论】：

+1 粉丝野兽！我需要我的对话框以与 slideDown() 不同的方式向下滑动。我用过：var height = $dialog.outerHeight(); $dialogPane.show() .css({top : height * -1}) .animate({top : -1}, 400, function () { //callback });

【解决方案2】：

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

【讨论】：

请记住，仅包含代码的答案不被视为完整

【解决方案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>

【讨论】：

请不要只发布代码作为答案，还要解释您的代码的作用以及它如何解决问题的问题。带有解释的答案通常更有帮助、质量更好，并且更有可能吸引投票。