3

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
  • Já deu uma olhada em Effects do jQuery? api.jquery.com/category/effects
    – user3603
    Commented 23/07/2015 às 2:41
  • Deu uma olhada sim, mas eu sou iniciante nessas linguagens, e acho que eu não saberia montar o código. Mas obrigado por ter me passado o site. Commented 23/07/2015 às 2:53

2 Respostas 2

4

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/

1

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .