jqueryで2つの画像のアニメーションを作成

Question

私はアニメーション化したい2つの画像があります。コードはここでスタックオーバーフローで改善されましたが、それでも私のためには機能しません。私は私のCSSとhtmlコードに何が間違っているのか分かりません。

これは私のコードです：

$(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; 
 
} \t 
 

 
@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

私が変更されている何のための私のインラインコメントを参照してください：

1. は#img4{position: relative;}
2. はに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; 
 
} \t 
 

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

あなたが.を追加するのを忘れ...あなたのCSSで

Answer 2

• をあなたはこれでより多くの助けが必要な場合はコメントをお気軽に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>