如何动画固定元件的位置与jQuery

我有一个div其位置属性是：如何动画固定元件的位置与jQuery

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

来源

2015-03-13 Mostafa Talebi

退房这个职位的可能解决方案：http://stackoverflow.com/questions/8518400/jquery-animate-from-css-top-to-bottom – Daved 2015-03-13 14:04:34

尝试将top从0改为top 100％ - 25px> top：calc（100％ - 25px）; – Patrick 2015-03-13 14:08:06

您应该top: 0使用负margin-top值维持在div从页面底部有一定的距离，以动画top: 100%。这样做，您的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>

来源

2015-03-13 14:08:02

如果margin-top是否为jquery计算的元素高度，它会更好吗？然后再减去另外的25个像素（以便按照他最初的要求将其底部的25个像素）？ – joncampbell 2015-03-13 14:34:26

@joncampbell你说得对，我正在添加它;现在解决方案更好。 – 2015-03-13 14:40:01

-1

$(document).ready(function(){ 

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

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

来源

2015-03-13 14:16:49 EddNewGate

这只会从顶部向下移动div 500像素，而不是在页面的底部。 – 2015-03-13 14:29:09

如何动画固定元件的位置与jQuery

回答

相关问题