使用jquery创建两个图像的动画

Question

我有两个想要制作动画的图像。这个代码在Stack Overflow中得到了改进，但它对我来说仍然不起作用。我不知道我的CSS和HTML代码有什么问题。

这是我的代码：

＆＃13;

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

• 在您的CSS中，您忘记在.班级uno上添加.uno。
• 在#img4忘记添加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>

Answer 2

请参阅我的内联评论，了解我的更改内容：

1. 添加了#img4{position: relative;}
2. 将uno{...}更改为.uno{...}
＆＃13;
＆＃13;
$(document).ready(function() {
    $(".animar").click(function() {
        $("#img4").addClass("uno");
    });
});
＆＃13;
#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;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

如果您需要更多帮助，请随时发表评论......