create animation of a two images with jquery

Question

I have two images that i want to animate. The code was improved here at Stack Overflow but it still doesn't work for me. I don't know what is wrong with my CSS and html code.

this is my code:

$(document).ready(function() {
    $(".animar").click(function() {
        $("#img4").addClass("uno");
    });
});

#img4 {
    width: 7%;
    height: auto;
    margin: auto;
    display: block;
    background-size:20%;
    float: left;
}

#img5 {
    width: 3%;
    height: auto;
    margin: auto;
    display: block;
    background-size:20%;
    position: relative;
    right:20%;
}

.animar {
    width: 123px;
    height: auto;
    margin-right: 15%;
    display: block;
    background-size:0%;
    float:right;
    border-color: white;
    background-color: rgba(43,86,162, 1.00);
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 20px;
    color: white;
    border-radius: 12px;
    border-width: 10px;
}

uno {
    animation-name: uno;
    animation-duration: 10s;
}	 

@keyframes uno {
    20% {left:80px;}
    50%{left:190px;}
    70%{left:220px}
    100%{left:350px;}
}

#gradiente2 {
     background: rgba(43,86,162, 1.00);
     position: relative;
     margin-bottom: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-md-12" id="gradiente2">

    <p id="t1" class="typewrite" data-period="2000" data-type='[ "En nuestra institución siempre nos preocupamos por brindarte lo mejor"  ]'><span class="wrap"></span> </p>

    <p id="t2" class="typewrite" data-period="2000" data-type='[ "Síempre le Ponemos Corazón, a lo que hacemos" ]'><span class="wrap"></span> </p>

    <div>
        <img src="imagenes/kangura.png" class="img-responsive" id="img4">
        <img src="imagenes/corazon.png" class="img-responsive" id="img5">
        <button class="animar">Entregar Corazón</button>
    </div>

</div>

Answer 1

Please see my inline comments for what I have changed:

1. added #img4{position: relative;}
2. changed uno{...} to .uno{...}

$(document).ready(function() {
    $(".animar").click(function() {
        $("#img4").addClass("uno");
    });
});

#img4 {
    width: 7%;
    height: auto;
    margin: auto;
    display: block;
    background-size:20%;
    float: left;
    position: relative;/* NEW */
}

#img5 {
    width: 3%;
    height: auto;
    margin: auto;
    display: block;
    background-size:20%;
    position: relative;
    right:20%;
}

.animar {
    width: 123px;
    height: auto;
    margin-right: 15%;
    display: block;
    background-size:0%;
    float:right;
    border-color: white;
    background-color: rgba(43,86,162, 1.00);
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 20px;
    color: white;
    border-radius: 12px;
    border-width: 10px;
}

.uno { /* changed "uno" to ".uno" */
    animation-name: uno;
    animation-duration: 10s;
}	 

@keyframes uno {
    20%{left:80px;}
    50%{left:190px;}
    70%{left:220px}
    100%{left:350px;}
}

#gradiente2{
     background: rgba(43,86,162, 1.00);
     position: relative;
     margin-bottom: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-md-12" id="gradiente2">

    <p id="t1" class="typewrite" data-period="2000" data-type='[ "En nuestra institución siempre nos preocupamos por brindarte lo mejor"  ]'><span class="wrap"></span> </p>

    <p id="t2" class="typewrite" data-period="2000" data-type='[ "Síempre le Ponemos Corazón, a lo que hacemos" ]'><span class="wrap"></span> </p>

    <div>
        <img src="imagenes/kangura.png" class="img-responsive" id="img4">
        <img src="imagenes/corazon.png" class="img-responsive" id="img5">
        <button class="animar">Entregar Corazón</button>
    </div>

</div>

Feel free to leave a comment if you need more help with this...

Answer 2

• In your css you forgot to add a . to the uno class .uno.
• In the #img4 you forgot to add position:relative

$(document).ready(function() {
  $(".animar").click(function() {
    $("#img4").addClass("uno");
  });
});

#img4 {
  position: relative;
  width: 7%;
  height: auto;
  margin: auto;
  display: block;
  background-size: 20%;
  float: left;
}

#img5 {
  width: 3%;
  height: auto;
  margin: auto;
  display: block;
  background-size: 20%;
  position: relative;
  right: 20%;
}

.animar {
  width: 123px;
  height: auto;
  margin-right: 15%;
  display: block;
  background-size: 0%;
  float: right;
  border-color: white;
  background-color: rgba(43, 86, 162, 1.00);
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 20px;
  color: white;
  border-radius: 12px;
  border-width: 10px;
}

.uno {
  animation-name: uno;
  animation-duration: 10s;
}

@keyframes uno {
  20% {
    left: 80px;
  }
  50% {
    left: 190px;
  }
  70% {
    left: 220px
  }
  100% {
    left: 350px;
  }
}

#gradiente2 {
  background: rgba(43, 86, 162, 1.00);
  position: relative;
  margin-bottom: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-md-12" id="gradiente2">

  <p id="t1" class="typewrite" data-period="2000" data-type='[ "En nuestra institución siempre nos preocupamos por brindarte lo mejor"  ]'><span class="wrap"></span> </p>

  <p id="t2" class="typewrite" data-period="2000" data-type='[ "Síempre le Ponemos Corazón, a lo que hacemos" ]'><span class="wrap"></span> </p>

  <div>
    <img src="https://1.img-dpreview.com/files/p/TS1200x900~sample_galleries/7214830437/4039259235.jpg" class="img-responsive" id="img4">

    <img src="https://2.img-dpreview.com/files/p/TS1200x900~sample_galleries/7214830437/8857557974.jpg" class="img-responsive" id="img5">
    <button class="animar">Entregar Corazón</button>
  </div>

</div>