JQuery: Trabalhando com animate() – Movendo objeto

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

  • 30 de março de 2013 em 11:42
    Permalink

    e se eu não quiser no click? e se eu quiser quando a pagina carregar?

    Resposta
    • 2 de abril de 2013 em 9:07
      Permalink

      Olá meu caro, é bem simples.

      Basta comentar as linhas 4 e 15.

      Resposta
  • 12 de maio de 2014 em 21:28
    Permalink

    Como fazer para mover para qualquer lugar, arrastando com o mouse?

    Resposta
  • 24 de julho de 2014 em 16:17
    Permalink

    Gostaria desse codigo na versão de JavaScript

    Resposta
  • 19 de maio de 2015 em 15:54
    Permalink

    como faço ele se moviventar o retangulo para os quatro cantos da tela.

    Resposta
  • 16 de novembro de 2017 em 11:41
    Permalink

    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?

    Resposta
    • 6 de dezembro de 2017 em 21:35
      Permalink

      Rafael,

      através do id do elemento que está na posição absoluta você consegue descobrir a posição na página.

      Resposta

Deixe uma resposta

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