Add class after the page is loaded

Asked

Viewed 792 times

4

I’m having a problem, I’m trying to add a class of Animate css to give an effect when I finish loading the page, but it’s not working, it seems he’s adding the class before the page finishes loading, see the code:

$(window).load(function(){
  $(".progresso").delay(5000).fadeOut();
  $(".preloader").delay(5000).fadeOut("slow");
  $('.bemvindo').addClass('animated bounceInDown');
})
javascript jquery

3 answers

2

In Jquery:

$(function(){
    $(".progresso").delay(5000).fadeOut();
    $(".preloader").delay(5000).fadeOut("slow");
    $('.bemvindo').addClass('animated bounceInDown');
});

JSFIDDLE

1

I noticed you are using the plugin http://www.jqueryscript.net/animation/Animate-Elements-In-When-They-Come-Into-View-jQuery-CSS3-Animate-It-Plugin.html

<!DOCTYPE html>
<html>
  <head>
<!-- VOCE PRECISA DESSE CSS ABAIXO PRA RODAR LEGAL 
Faça o download em:
http://www.jqueryscript.net/demo/Animate-Elements-In-When-They-Come-Into-View-jQuery-CSS3-Animate-It-Plugin/ -->
<link rel="stylesheet" href="css/animation.css" type="text/css">

<script>
  window.onload=function()
  {

    $(".progresso").fadeOut("slow");
    $(".preloader").fadeOut("slow");
    $(".bemvindo").addClass("animated bounceInDown");
                
  }
 </script>      

    
    </head>
 <body>

<div class='animatedParent'>
<div class="progresso" data-id='1'>Ordem ou progresso ...</div>
<div class="preloader" data-id='2'>Preloader Carregando etc...</div>
<div class="bemvindo" data-id='3'> Isso vai mecher na abertura da página 
 depois que vc tiver incluído o css do animate no head
 e o script do animate q falta no fim da página.</div>
</div>
   
</body>
 </html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
   
<!-- VOCE PRECISA DESSE JAVSCRIPT ABAIXO PRA RODAR LEGAL Faça o download em:
http://www.jqueryscript.net/demo/Animate-Elements-In-When-They-Come-Into-View-jQuery-CSS3-Animate-It-Plugin/ -->
<script src='js/css3-animate-it.js'></script>

0

Try $(document).ready() instead of $(window).load().

  • it didn’t work, it still doesn’t have the effect

Browser other questions tagged javascript jquery

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