如何使用 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，那么它会粘在顶部，它不关心任何底部值。但是我删除了顶部属性和动画底部，它从最底部开始动画。我希望动画从 top 值指定的位置开始，并在 bottom 值指定的位置结束。我该怎么办？

这是 JSFiddle：

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

Answer 1

您应该使用负 margin-top 值从 top: 0 到 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'});    
        });
});

Fiddle: http://jsfiddle.net/gcsx1exj/1/

如何使用 jQuery 为固定元素的位置设置动画

How to animate a position of a fixed element with jQuery

html

javascript

css

jquery

animation