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:

/

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/mostafatalebi2/ex1b69g9/

• javascript
• jquery
• html
• css
• animation

Share Improve this question Follow edited Mar 13, 2015 at 14:02 Daniel A. White 191k4949 gold badges379379 silver badges465465 bronze badges asked Mar 13, 2015 at 14:00 Mostafa TalebiMostafa Talebi 9,1831818 gold badges6767 silver badges109109 bronze badges 2

• Check out this post for a possible solution: stackoverflow./questions/8518400/… – Daved Commented Mar 13, 2015 at 14:04
• try to change top from 0 to top 100% - 25px > top:calc(100% - 25px); – Patrick Commented Mar 13, 2015 at 14:08

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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

$(document).ready(function(){

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

Fiddle: http://jsfiddle/gcsx1exj/1/