Javascript input transition effect

Asked

Viewed 1,870 times

3

Hi, I wanted when I opened a page my image would come from the bottom up, and when I got to the top it would disappear, all this in 10 seconds. How could I do that?

javascript jquery html

  • Have you looked at Effects jQuery? https://api.jquery.com/category/effects/

  • It took a look yes, but I am beginner in these languages, and I think I would not know how to assemble the code. But thank you for giving me the site.

2 answers

4


You can use the functions ready(), slideup(), slideDown() and Animate() to get what you want.

$(document).ready(function () {
    $(".subir").slideDown().animate({
        bottom: $(document).height()
    }, 10000);
});

In the code, the function being passed to ready() of document will only be called when all page elements are loaded. Then use slideDown() and animate() to move the div that contains the image from bottom to top, so we passed $(document).height() as an option bottom of the effect that will last for 10000ms(10s).

Here the demo at the Fiddle: http://jsfiddle.net/kwza5y1r/1/

OBS: Click 'Run' again if you do not see the effect, because it happens when the page loads.

DEMO in updated Fiddle, change the values sent to slideDown() and Animate() to change the duration: http://jsfiddle.net/andersonmadeira/b5pfptby/

1

The code below ran right on my machine, only here on SOPT and jsfiddle did not run the effect, so do a localhost test that will work:

<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="http://i.stack.imgur.com/T0CWZ.png" />
    </div>
</body>
<script>
    function efeito(){        
        $("#imagem").animate({ top: 0 }, 2000,function(){ $(this).hide(); });         
    }
</script>
</html>

Obs: where this written 2000, change to 10000 to wait the 10 seconds

Browser other questions tagged javascript jquery html

You are not signed in. Login or sign up in order to post.