How to animate a position of a fixed element with jQuery

Question

I have a div whose position properties is:

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

I then want to animate its bottom (not with top, with bottom property)

$(document).ready(function(){

                  $("a").on("click", function(e){
    e.preventDefault();
                      $("div").animate({ top: "none", bottom : 25});    
        });
});

But it does not work. The problem is that top 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?

Here is the JSFiddle:

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

Solution

You should animate from top: 0 to top: 100% using a negative margin-top value to maintain the div at a certain distance from the bottom of the page. Doing so, your div will move from the very top to the bottom of the page, like you want.

To move your div exactly 25 pixels distant from the bottom you can set margin-top to the negative value of your div's height minus 25px.

Here's an example:

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

Comments

[Marco Bonelli]

This will just move the div 500 pixels down from the top, not at the bottom of the page.

[joncampbell]

Would it be better if margin-top was negative the jquery calculated height of the element? and then minus another 25 pixels(so that its 25 pixels off the bottom as he originally requested)?

[Marco Bonelli]

@joncampbell You're right, I was adding it; now the solution is better.