JQuery: Trabalhando com animate() – Movendo objeto

Por / 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#btnMover").click(function(){
  $("#elemento").animate({ 
    // distancia da margem a esquerda
    marginLeft: "200px",
    // distância do topo
    marginTop: "200px"
    // tempo de execucao - milissegundos
    }, 1000, function() {
     $(this).html("chegamos!");
    });
  });
});
</script>
<input type="button" id="btnMover" value="Mover">
<div id="elemento" style="border:1px solid #FF0000; width:180px; height:80px;">
  clique para mover
</div>

Veja funcionando:

[iframe http://jsfiddle.net/c9eVH/1/embedded/result/ 600 400]

12 comentários em “JQuery: Trabalhando com animate() – Movendo objeto”

  6. Rafael Martins

    Muito bom!! Parabéns!

    Agora digamos que eu tenha vários objetos relativos na página ( como diversos produtos ) e queira que quando clicar neles eles vão para um ponto fixo na tela (outro objeto absoluto, como um carrinho de compra) como eu faço? Com código que estou brincando abaixo consigo apenas um deslocamento relativo, existe como ter um dislocamento para uma localização absoluta na tela?

    Responder

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Rolar para cima