jQuery Animate 顶部（从下到上）

Posted 2023-03-06

【中文标题】jQuery Animate 顶部（从下到上）

【英文标题】：jQuery Animate top (From bottom to top)

【发布时间】：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 );

【参考方案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>

【讨论】：

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