Olá, eu queria que quando abrisse uma página minha imagem viesse de baixo pra cima, e quando chegasse no topo ela desaparecesse, tudo isso em 10 segundos. Como poderia fazer isso?
2 Respostas
Você pode usar as funções ready(), slideUp(), slideDown() e animate() pra atingir o que quer.
$(document).ready(function () {
$(".subir").slideDown().animate({
bottom: $(document).height()
}, 10000);
});
No código, a função que está sendo passada pra ready()
do document
só vai ser chamado quando todos os elementos da página forem carregados. Depois usa-se slideDown()
e animate()
pra mover a div que contem a imagem de baixo pro topo, por isso passamos $(document).height()
como opção bottom
do efeito que vai durar por 10000ms(10s).
Aqui o DEMO no Fiddle: http://jsfiddle.net/kwza5y1r/1/
OBS: Clique em 'Run' novamente se não ver o efeito, porque acontece quando a página carrega.
DEMO no Fiddle atualizado, mude os valores enviados pra slideDown() e animate() pra mudar a duração: http://jsfiddle.net/andersonmadeira/b5pfptby/
O código abaixo rodou certinho na minha maquina, só que aqui no SOPT e no jsfiddle não rodou o efeito, então faz um teste localhost que vai dar certo:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Exemplo</title>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.1/jquery-ui.min.js"></script>
<style type="text/css">
#imagem {
/*display: none;
bottom: 0;
position: absolute*/
}
.embaixo{ bottom: 0; position: absolute }
</style>
</head>
<body>
<div id="sidebar">
<ul>
<li><a onclick="efeito()" href="#">Me clique</a></li>
</ul>
</div>
<div id="imagem" class="embaixo">
<img src="https://i.sstatic.net/T0CWZ.png" />
</div>
</body>
<script>
function efeito(){
$("#imagem").animate({ top: 0 }, 2000,function(){ $(this).hide(); });
}
</script>
</html>
Obs: onde esta escrito 2000, mude para 10000 para aguardar os 10 segundos
Effects
do jQuery? api.jquery.com/category/effects