Input transition effect jquery javascript

Navigation
3

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

    
asked by anonymous 23.07.2015 / 03:53

2 answers

4

You can use the ready () functions, slideUp () , slideDown () and animate () to achieve what you want. 

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

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

Here's the DEMO on Fiddle: link

NOTE:

DEMO in Fiddle updated, change the values sent to slideDown () and animate () to change the duration: link

    
23.07.2015 / 14:19
1

The code below ran right on my machine, but here in SOPT and jsfiddle did not spin 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><!DOCTYPEhtml><html><head><title>Exemplo</title><metacharset="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><scripttype="text/javascript" src="http://code.jquery.com/ui/1.9.1/jquery-ui.min.js"></script><styletype="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>functionefeito(){$("#imagem").animate({ top: 0 }, 2000,function(){ $(this).hide(); });         
    }
</script>
</html>

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

    
23.07.2015 / 13:53
Retrieve Google Maps address reporting Long and Lat How to avoid multiple inserts in the database