0 votes

JQuery Animation

I have 4 Elements in html in a column of the entire width and height of the <div class="container"> I need you to jquery I animated the 4 elements, with an animation of entry of the 4 elements first the welcome, it fades and then goes to the top inside the column, then enters the logo and moves to the left, then comes the signature and this goes to the right and finally enters the logo of the school and goes to the right after the signature, that's all the animation. I am doing it with bootstrap 3 and in wordpress and in this wordpress I have visual composer with a theme outdated call: scent does not support guttenberg and I have two elements for this animation the html and the js code that introduce code into the <body> I also have the possibility to give an ID or a CLASS to the elements.

This is what I have at the moment:

    <!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <!--BOOTSTRAP CSS LIBRARY-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!--BOOTSTRAP CSS LIBRARY-->
    <link rel="stylesheet" href="css/estilos.css">
    <title>Animacion de Entrada Grupo Empresarial SKY</title>
  </head>
  <body>
    <div class="container-fluid fondo">
      <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12">
          <img src="img/bienvenido.jpg" alt="imagen-bienvenido" id="bienvenido" class="bienvenido-css">
          <img src="img/logo.png" alt="imagen-logo" id="logo" class="logo-css">
          <img src="img/firma.jpg" alt="imagen-firma" id="firma" class="firma-css">
          <img src="img/escuela.png" alt="imagen-academia" id="escuela" class="escuela-css">
        </div>
      </div>
    </div>

    <script src="js/app.js"></script>
    <!--BOOTSTRAP JS LIBRARY-->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <!--BOOTSTRAP JS LIBRARY-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  </body>
</html>

The sheet of js :

    $( document ).ready(function() {
  $(#bienvenido).show();
  $(#bienvenido).animate({top:"+=100px"},2000);
  $(#logo).show();
  $(#logo).animate({ right: "+=100px" }, 2000 );
  $(#firma).show();
  $(#firma).animate({left:"+=100px"},2000);
  $(#escuela).show();
  $(#escuela).animate({left:"+=200px"},2000);
});

The sheet of CSS :

.fondo{background-color: white;}
.logo-css{display:none;z-index:0;width: 260px;height: 260px;}
.firma-css{display: none;z-index:0;}
.escuela-css{display: none;z-index:0;}
.bienvenido-css{display:none;z-index:0;}

That's all I have at the moment I am currently completing through the documentation from jquery , css , html . I just need guidance, the rest is up to me.

4voto

Ricardo Pérez Points 1271

First, your code JQuery has some small details, when you call an element by its id, you need to enclose it in quotation marks e.g. $("#bienvenido").show(); otherwise it will give you an error.

In order for the function animate to function properly, your elements html need to own the property position:relative o position:absolute otherwise they will not be able to cheer up.

Finally, for your animations to run one after the other you need to nest the functions, so that once one is finished, it runs another.

$( document ).ready(function() {
  $("#bienvenido").show();
  $("#bienvenido").animate({top:"+=100px"},2000, function() {
    $("#logo").show();
    $("#logo").animate({ right: "+=100px" }, 2000, function() {
        $("#firma").show();
        $("#firma").animate({left:"+=100px"},2000, function() {
          $("#escuela").show();
          $("#escuela").animate({left:"+=200px"},2000);
      });
    });
  }); 
});

.fondo{background-color: white;}
.logo-css{display:none;z-index:0;width: 260px;height: 260px; position: relative;}
.firma-css{display: none;z-index:0;position: relative;}
.escuela-css{display: none;z-index:0;position: relative;}
.bienvenido-css{display:none;z-index:0;position: relative;}

<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <!--BOOTSTRAP CSS LIBRARY-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!--BOOTSTRAP CSS LIBRARY-->
    <link rel="stylesheet" href="css/estilos.css">
    <title>Animacion de Entrada Grupo Empresarial SKY</title>
  </head>
  <body>
    <div class="container-fluid fondo">
      <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12">
          <img src="img/bienvenido.jpg" alt="imagen-bienvenido" id="bienvenido" class="bienvenido-css">
          <img src="img/logo.png" alt="imagen-logo" id="logo" class="logo-css">
          <img src="img/firma.jpg" alt="imagen-firma" id="firma" class="firma-css">
          <img src="img/escuela.png" alt="imagen-academia" id="escuela" class="escuela-css">
        </div>
      </div>
    </div>

    <script src="js/app.js"></script>
    <!--BOOTSTRAP JS LIBRARY-->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <!--BOOTSTRAP JS LIBRARY-->
  </body>
</html>

I hope it will give you the support you need.

I have another question I'd better publish the code.

<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <!--BOOTSTRAP CSS LIBRARY-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!--BOOTSTRAP CSS LIBRARY-->
    <link rel="stylesheet" href="css/estilos.css">
    <title>Animacion de Entrada Grupo Empresarial SKY</title>
  </head>
  <body>
    <div class="container-fluid fondo">
      <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 tableroEncabezado">

        </div>
      </div>
      <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-12 tableroLogo">

        </div>
        <div class="col-lg-4 col-md-4 col-sm-12 tableroFirma">

        </div>
        <div class="col-lg-4 col-md-4 col-sm-12 tableroEscuela">

        </div>
      </div>
    </div>
    <!--IMAGENES
    <img src="img/1.jpg" alt="imagen-bienvenido" id="bienvenido" class="bienvenido-css">
    <img src="img/2.png" alt="imagen-logo" id="logo" class="logo-css">
    <img src="img/3.jpg" alt="imagen-firma" id="firma" class="firma-css">
    <img src="img/4.png" alt="imagen-academia" id="escuela" class="escuela-css">
    -->
    <!--IMAGENES-->
    <!--BOOTSTRAP JS LIBRARY-->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <!--BOOTSTRAP JS LIBRARY-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

the JS:

$(function() {
  //imagenBienvenida();
  animacionPorCeldas();
});

//Animacion con animate
/*function animacion(){
 $("#1").animate({top:"+=100px"},2000, function() {
   $("#2").animate({ right: "+=100px" }, 2000, function() {
       $("#3").animate({left:"+=100px"},2000, function() {
       $("#4").animate({left:"+=200px"},2000);
     });
   });
 });
}*/
//Animacion con animate

function animacionPorCeldas(){
  $(".tableroEncabezado").append("<img src='img/1.jpg' alt='imagen-bienvenido' id='bienvenido' class='bienvenido-css'>").fadeIn();

  //$("#1").fadein("",function(){

  //}).animate({
    //right:"+=400px",
    //height:"300px",
    //width:"300px"
  //},5000);
}

//function imagenBienvenida(){
  //$(".tableroEncabezado").append("<img src='img/1.jpg' alt='imagen-bienvenido' id='bienvenido' class='bienvenido-css'>");
  //$(".tableroLogo").append("<img src='img/2.png' alt='imagen-logo' id='logo' class='logo-css'>");
  //$(".tableroFirma").append("<img src='img/3.jpg' alt='imagen-firma' id='firma' class='firma-css'>");
  //$(".tableroEscuela").append("<img src='img/4.png' alt='imagen-academia' id='escuela' class='escuela-css'>");
//}

the css:

.fondo{background-color: white;}
.logo-css{width: 260px;height: 260px; position: relative;}
.firma-css{position: relative;width: 260px;height: 260px;}
.escuela-css{position: relative;width: 260px;height: 260px;}
.bienvenido-css{position: relative;}

The point is this: how do I add the element boardHeader and with a fadeIn?

$(".tableroEncabezado").append("<img src='img/1.jpg' alt='imagen-bienvenido' id='bienvenido' class='bienvenido-css'>").fadeIn();

Thank you for the clarification.

HolaDevs.com

HolaDevs is an online community of programmers and software lovers.
You can check other people responses or create a new question if you don't find a solution

Powered by:

X