•  
     

.animate() - mover uma imagem para baixo - jQuery

O parâmetro desse efeito é levemente complicado — se quiséssemos mover um div 10 pixels para baixo, teríamos que digitar algo do tipo

Código: Selecionar todos

$('div').animate({top:'+=10px'},500);

Onde o que conteúdo entre chaves diz "ei, jQuery, adicione 10 pixels à margem da parte de cima", e o segundo parâmetro diz "faça isso em 500 milissegundos!" (1.000 milissegundos = um segundo.)

HTML

Código: Selecionar todos

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<img src="http://i1061.photobucket.com/albums/t480/ericqweinstein/elevator.png"> 
</body>
</html>


CSS

Código: Selecionar todos

body {
    margin: 0;
    padding: 0;
}
img {
    position: absolute;
}


JavaScript

Código: Selecionar todos

$(document).ready(function(){
$('img').animate({top:'+=100px'},1000);
});


Demo: http://jsfiddle.net/m317nj0b/