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属性和动画底部，它从最底部开始动画。我希望动画从顶部值指定的位置开始，并以底部值指定的位置结束。我该怎么办？

这是JSFiddle：

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

Answer 1

您应使用top: 0否定值从top: 100%动画到margin-top，以使div保持距离页面底部一定距离。这样做，您的div将从页面的顶部移动到底部，就像您想要的那样。

要将div移动到距离底部25 pixels的距离，您可以将margin-top设置为div的高度减去25px 的负值

以下是一个例子：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

$(document).ready(function(){

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

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

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

2 个答案: