如何用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: 0到top: 100%使用负的margin-top值进行top: 100%动画，以使div与页面底部保持一定距离。 这样做， 您的div可以根据需要从页面的顶部移至底部 。

要使div距底部精确25 pixels ，可以将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> 

Answer 2

$(document).ready(function(){

                  $("a").on("click", function(e){
    e.preventDefault();
                      $("div").animate({ top:'500px'});    
        });
});

小提琴： http : //jsfiddle.net/gcsx1exj/1/