title: How to animate a position of a fixed element with jQuery
body: <p>I have a div whose position properties is:</p>
  
  <pre><code>.some
  {
      position: fixed;
      top: 0px;
  }
  </code></pre>
  
  <p>I then want to animate its <code>bottom</code> (not with <code>top</code>, with <code>bottom</code> property)</p>
  
  <pre><code>$(document).ready(function(){
  
                    $("a").on("click", function(e){
      e.preventDefault();
                        $("div").animate({ top: "none", bottom : 25});    
          });
  });
  </code></pre>
  
  <p>But it does not work. The problem is that <code>top</code> property is in the priority. If I set the top to 0 then it sticks to the top, it does not care any to bottom value. However I remove the top property and animate bottom, it starts the animation right from the very bottom. I want the animation to start from the position which is designated by top value and end in where it is specified by bottom value. What should I do?</p>
  
  <p>Here is the JSFiddle:</p>
  
  <p><a href="http://jsfiddle.net/mostafatalebi2/ex1b69g9/" rel="nofollow">http://jsfiddle.net/mostafatalebi2/ex1b69g9/</a></p>