How can I achieve this with jquery?

Question

I don't know how it's spelled so I can't perform an exact search. I've searched for "slide in" but it's not what I really want.

There's a picture:

As you can see, the ball should come from the top part of the website, from invisible to the somewhere of the webpage.

Any tips?

Answer 1

This is what you need : http://jsfiddle.net/LYA8L/

HTML:

<button>Animate</button>
<div class="circle">
</div>

CSS:

.circle{
    width:50px;
    height:50px;
    background-color:orange;
    border-radius:25px;
    -webkit-border-radius:25px;
}

JS:

$(function(){
    $('button').on('click', function(){
        $('.circle').animate({
            marginTop: '300px',
            marginLeft: '100px'
        }, 2500);
    });
});

Answer 2

http://jsfiddle.net/jq6Ja/

<div id="container">
    <div id="block"></div>
</div>

$( "#block" ).animate({
    top: "+=50"
    }, 1000, function() {
    console.log('all done');
});

Answer 3

Done:

$(".logo").animate({
    marginTop: "380px",
}, 2500 );