Jquery Animate Top (From Bottom to Top)

jQuery Animate top (From bottom to top)

Ah Found it!!

$("#features").fadeIn()
.css({top:1000,position:'absolute'})
.animate({top:275}, 800, function() {
    //callback
});

So basically I've set the top from css at the very end to 1000, then animated it to 275 which is up...

Animate div from bottom to top instead of top to bottom in jQuery

You could put it in a container and position it absolutely?:

HTML:

<a href="#" id="menu">click me for menu</a>
    <div id="cont">
    <div id="test"></div>
</div>

CSS:

#cont{
    height:500px; width:50px; position:relative;
}
#test{
    height: 500px; width: 50px; background-color: #000; display: none; position:absolute; bottom:0; left:0;
}

JavaScript:

$('#menu').click(function() {
    $('#test').animate({
        height: 'toggle'
        }, 290, function() {
    });
});

Fiddle

Edit: Why it works
I've placed a container around the menu and given it the style position:relative. What I assume to be a menu (#test) has been given the style position:absolute meaning you can position it according to top,right,bottom and left, relative to the containing element (Provided it has a position other than the default hence we give the container a relative position). If we give the element a top:0;left:0 the top left of the element would stick to the top left of it's parent, similarly, if we did top:0;bottom:0 the bottom left of this element would stick to the bottom left of it's parent. Rambling, aren't I? So, to summarize, #test is 'stuck' to the bottom of it's parent, hence it animates from the bottom. Another quick point, the containers height is important! Because we have given #test an absolute position, it won't push the container to it's height, so we set the height to ensure #test loads 500px from the top of the container.

How to make jQuery Scrolling Top to bottom and Bottom to Top Slow Animation on Landing page menu

The code is fine and works, you simply forgot to put a comma after target.offset().top

Have a look here for a demo: https://jsfiddle.net/L02tck8x/

jQuery animate from CSS top to bottom

I eventually came up with a solution...

Basically you animate from the old top position to another position also relative to to the top which you calculate by taking the window height and subtracting (1) the desired position from the bottom, and (2) the height of the element you want to animate. Then, at the end of the animation add a callback to change the css so as the element is then position with a bottom value and a top auto value

Here's the jQuery script:

$('#click').click(function () {

    var windowHeight = $(window).height();
    var lineHeight = $('#line').height();
    var desiredBottom = 100;

    var newPosition = windowHeight - (lineHeight + desiredBottom);

    $('#line').animate({top:newPosition},1000,function () {
        $('#line').css({
            bottom: desiredBottom,
            top: 'auto'
        });
    });

});

You can see it working in this jsFiddle

How to animate an element bottom to top by using only jquery

I am guessing again that you want to get the coordinates of each step in that animation. jQuery animate function offers step:function (number, tween) which is called on every step in the animation. See demo for more details http://jsfiddle.net/nmGRt/5/

$('#rocket').delay(2000).animate({
    bottom: '600px'
}, {
    duration: 5000,
    complete: function () {},
    step: function (n, t) {
        var pos = $(this).position();
        $('#curVal')
            .text('X: ' + pos.left.toFixed(2) + ' Y: ' + pos.top.toFixed(2))
            .css({
            left: pos.left - 150,
            top: pos.top
        });
    }
});

---

I am guessing that you are trying this without jQuery UI. If you are targeting only for modern browsers then try below using CSS3. See Browser Compatibility table.

JS:

setTimeout(function () {
    $('#rocket').addClass('fire').css('bottom', 600);
}, 2000);

CSS3:

.fire {    
    -moz-transition: bottom 5s;
    -webkit-transition: bottom 5s;
    -ms-transition: bottom 5s;
    -o-transition: bottom 5s;
    transition: bottom 5s;
}

DEMO: http://jsfiddle.net/nmGRt/2/

Additionally you can control the animation using some cool cubic-bezier function. See demo http://jsfiddle.net/nmGRt/3/embedded/result/

.fire {
-webkit-transition: all 5000ms cubic-bezier(0.880, 0.045, 0.750, 0.750);
   -moz-transition: all 5000ms cubic-bezier(0.880, 0.045, 0.750, 0.750);
    -ms-transition: all 5000ms cubic-bezier(0.880, 0.045, 0.750, 0.750);
     -o-transition: all 5000ms cubic-bezier(0.880, 0.045, 0.750, 0.750);
        transition: all 5000ms cubic-bezier(0.880, 0.045, 0.750, 0.750); /* custom */
}

You can generate this function from this site: http://matthewlein.com/ceaser/

Additional

Quick playout with transform http://jsfiddle.net/nmGRt/4/embedded/result/

jQuery .animate() change top with bottom property

There are a few keys to making this work. Here's a jsFiddle example.

$('a').click(function(){
    var offsetTop = $(this).offset().top;
    var footerOffsetTop = $('.footer').offset().top;
    $('.footer').css({position:'absolute',bottom:'',top:footerOffsetTop})
        .animate({top:offsetTop},500);
});

It essentially works like this:

1. Find the footer's offset().top value
2. Change the footer's CSS so that it is absolutely positioned with the
   top: property having the value found in #1. This keeps allows you to
   animate it's top property, without having it jump.

jQuery animate from bottom to top

   $('.greyBox').mouseenter(function(){

   $(this).animate({height:'50px'},700).children('p').animate({opacity:1},200);
       $(this).siblings().animate({marginTop: '35px'}, 700)

   });

http://jsfiddle.net/BsPju/1/

You can counter-act the height by animating the marginTop of the sibling elements.

Otherwise you'd need to position them all absolute, with a bottom:0 declaration.

jquery animate height, from bottom to top, stop before top

Or, as an alternative, you could just let CSS handle everything by using the convenient transition property:
This renders / feels much nicer for me, since the browser doesn't take external instructions on a timer, but computes the steps itself, the best way it can.

(I also preserved your toggle button toggling the "active" class after the animation, however there were no rules for it in your CSS)

https://jsfiddle.net/svArtist/k293f6bj/

jQuery(document).ready(function($){    $(".main-nav-toggle .icon").click(function(){        $("#site-navigation").toggleClass("open");        setTimeout(function(){            $('.main-nav-toggle').toggleClass('active');        }, 1000);        return false;    });});

#site-navigation {    position: fixed;    bottom: 10%;    left: 10%;    right: 10%;    background-color:#eee;    padding:10px;    border:1px solid #aaa;    box-sizing:border-box;    height:0%;    opacity:0;    overflow:hidden;    transition: height 1s, opacity 1s;}#site-navigation.open {  height: 80%;  opacity:1;}.main-nav-toggle {    position: fixed;    bottom:0;    right:0;    z-index: 100;}.main-nav-toggle .icon {    background: gray;    color: white;    font-size: 30px;    cursor: pointer;    padding: 5px 10px;;    line-height: 1;    display: inline-block;    border: 2px solid black;    border-radius: 5px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="site-nav-container">    <div class="main-nav-toggle">        <div class="toggle icon"><i class="fa fa-bars">TOGGLEME</i></div>        <a href="#site-navigation" class="screen-reader-text">primary-menu</a>    </div>    <nav id="site-navigation" class="main-navigation" role="navigation">        <div class="menu-test-container">            <ul id="primary-menu" class="menu">                <li id="menu-item-1776" class="1776">                    <a href="#">Level 1</a>                    <ul class="sub-menu">                        <li id="menu-item-1778" class="item-1778">                            <a href="#">Level 2a</a>                            <ul class="sub-menu">                                <li id="menu-item-1780" class="item-1780">                                    <a href="#">Level 3a</a>                                </li>                                <li id="menu-item-1779" class="item-1779">                                    <a href="#">Level 3b</a>                                </li>                            </ul>                        </li>                        <li id="menu-item-1777" class="item-1777">                            <a href="#">Level 2b</a>                        </li>                    </ul>                </li>            </ul>        </div>                             </nav> <!--#site-navigation--></div>

using jQuery animate a div from top to bottom?

$(document).ready(function() {
    setInterval(function(){
        var bodyHeight = $('body').height();
        var footerOffsetTop = $('#moving').offset().top;
        var topToBottom = bodyHeight - footerOffsetTop;
        $('#moving').css({
            top : 'auto',
            bottom : topToBottom
        });
        $("#moving").delay(100).animate({
            top : '100px',
        }, 3000);       
    }, 3200);
})

---

Related Topics