CODEWITHSUNDEEP
jqueryjquery-animate
The Mechanic
The Mechanic

Reputation: 2329

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

I know I am asking a very common question, but I want to know if there is another way to animate an element by using only jQuery? I have created an animation but I want to improve it and I don't know how I can. Please check this fiddle to see the animation or you can see it here: walkoverapps.

I am just a little bit confused. Are there other ways to animate an element?

Upvotes: 3

Views: 4512

Answers (4)

Naveen D Almeida
Naveen D Almeida

Reputation: 877

Try http://jsfiddle.net/naveendalmeida/JVMmE/2/

HTML

<div id="content">
    <div id="left">
        <div class="pr" id="ani">
             <h3 id="rocket" style="bottom:50px"></h3>

            <div id="rocket-smoke"></div>
        </div>
    </div>
</div>

JS

<script type="text/javascript">

    function nav_animation(nav_obj, length, nav_intveral, direction) {
        var i = 0;
        var int = setInterval(function () {
            if (i < length) {
                    $(nav_obj).css(direction, i + "px");      
                i++;
            } else {
                window.clearInterval(int);
            }
        }, nav_intveral);
    }

    nav_animation('#rocket', 50, 1, 'bottom');
    nav_animation('#rocket', 100, 1, 'right');
    nav_animation('#rocket', 150, 1, 'bottom');
    nav_animation('#rocket', 200, 1, 'bottom');
    nav_animation('#rocket', 350, 1, 'right');
    setInterval("$('#rocket').css('-webkit-transform',' rotate(0deg)');",1700);
    nav_animation('#rocket', 400, 1, 'bottom');

</script>

CSS 

#rocket {
    position:absolute;
    bottom:50px;
    right:91px;
    background:url(http://walkoverapps.com/landing-content/rct.png) no-repeat;
    width:68px;
    height:84px;
    z-index:20;
    -webkit-transform: rotate(-45deg);
}

Upvotes: 5

Tony Shih
Tony Shih

Reputation: 436

Please try the fiddle attached. you might need to improve this based on your requirement.

function animateCustom(cobj, clength, cintveral, cdirection) {

  var i = 0;

  var int = setInterval(function () {
    if (i < clength) {
        if (cdirection == 'y')
            $(cobj).css("bottom", i + "px");
        else if (cdirection == 'x')
            $(cobj).css("right", i + "px");            
        i++;
    } else {
        window.clearInterval(int);
    }
  }, cintveral);

}

animateCustom('#rocket', 100, 5, 'x');
animateCustom('#rocket', 200, 5, 'y');

Upvotes: 2

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

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/

Upvotes: 10

caramba
caramba

Reputation: 22480

maybe you mean this with the x and y axis, you can say the exact position like this...

$(document).ready(function(){
    $('#rocket').delay(2000).animate({
        bottom:'+=600px',
        right:'-=200px'
    }, 5000,function(){});
});

you can also change "bottom" to "top" and "right" to "left" and "+=" to "-=" or just "-"

Upvotes: 2

Related Questions