如何用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属性是优先级。如果我将top设置为0，则它​​会停留在top上，它不会在乎底部值。但是，我删除了top属性并为底部动画，它从最底部开始动画。我希望动画从最高值指定的位置开始，并在最低值指定的位置结束。我该怎么办？

这是JSFiddle：

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

Answer 1

你应该从动画top: 0到top: 100%使用负margin-top值保持div在从页面底部有一定的距离。这样做，您div将根据需要从页面的顶部移至底部。

要使div 25 pixels与底部精确地保持一定距离，可以将margin-topdiv的高度减负设置为负值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>