Как анимировать положение фиксированного элемента с 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, то она придерживается вершины, она не заботится о нижнем значении. Однако я удаляю верхнее свойство и анимированное дно, он начинает анимацию прямо с самого низа. Я хочу, чтобы анимация начиналась с позиции, которая обозначена верхним значением, и заканчивается там, где она задается нижним значением. Что мне делать?

Вот JSFiddle:

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

Answer 1

Вы должны анимировать из top: 0 в top: 100% используя отрицательное margin-top значение для поддержания 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/