javascript - 如何使用 jQuery 对固定元素的位置进行动画处理

Question

我有一个 div，其位置属性是:

.some
{
    position: fixed;
    top: 0px;
}

然后我想为其bottom设置动画(不是使用top，而是使用bottom属性)

$(document).ready(function(){

                  $("a").on("click", function(e){
    e.preventDefault();
                      $("div").animate({ top: "none", bottom : 25});    
        });
});

但是它不起作用。问题在于 top 属性具有优先级。如果我将顶部设置为 0 那么它会粘在顶部，它不关心任何底部值。然而，我删除了顶部属性并为底部设置了动画，它从最底部开始动画。我希望动画从顶部值指定的位置开始，到底部值指定的位置结束。我该怎么办？

这是 JSFiddle:

http://jsfiddle.net/mostafatalebi2/ex1b69g9/

Answer 1

您应该使用负的 margin-top 值从 top: 0 到 top: 100% 进行动画处理，以维持 div 距页面底部一定距离。这样做，您的 div 将从页面的顶部移动到底部，如您所愿。

要将 div 精确移动到距底部 25 像素 的位置，您可以将 margin-top 设置为 div 高度减去 25px 的负值。

这是一个例子:

$(document).ready(function() {
    $("a").on("click", function(e) {
        e.preventDefault();
        var $div = $('div.some');
        $div.animate({
            top: '100%',
            marginTop: - $div.height() - 25
        });
    });
});

.some {
  position: fixed;
  top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class='some'>I am a DIV!</div>
<br/>
<br/>
<a href='#'>Click Here!</a>