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]
e se eu não quiser no click? e se eu quiser quando a pagina carregar?
Olá meu caro, é bem simples.
Basta comentar as linhas 4 e 15.
Como fazer para mover para qualquer lugar, arrastando com o mouse?
Fala Wiliian.
O que você quer pode ser encontrado neste link: http://jqueryui.com/draggable/
Gostaria desse codigo na versão de JavaScript
Olá Jonas.
Para a sua solicitação foi criado um novo post.
Segue link: http://www.linhadecomando.com/javascript/javascript-movendo-objeto-elemento
como faço ele se moviventar o retangulo para os quatro cantos da tela.
Olá Marcio,
veja neste link…
Olá
Se quero que a imagem se desloque horizontalmente/verticalmente, conforme movo a barra de rolagem?
Vi esse efeito nessa página (http://www.samsung.com/br/tablets/galaxy-tab-s3/SM-T825NZKPZTO/) e achei bacana
Conforme vou descendo a barra de rolagem, as imagens vão entrando na posição horizontal e na vertical
Fala Daniel.
Existe um componente em javascript que permite fazer algo parecido com o site que enviou.
Veja o link http://mynameismatthieu.com/WOW/
Abraço
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?
Rafael,
através do id do elemento que está na posição absoluta você consegue descobrir a posição na página.