erstellen Animation von zwei Bildern mit Jquery

Question

Ich habe zwei Bilder, die ich animieren möchte. Der Code wurde hier bei Stack Overflow verbessert, funktioniert aber immer noch nicht für mich. Ich weiß nicht, was mit meinem CSS- und HTML-Code falsch ist.

dies ist mein 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; 
 
} \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

Bitte meine Inline-Kommentare sehen, was ich geändert haben:

1. #img4{position: relative;}
2. uno{...} zugeändert hinzugefügt

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

Fühlen Sie sich frei um einen Kommentar zu lassen, wenn Sie mehr Hilfe brauchen ...

Answer 2

• in Ihrem CSS vergessen haben, eine . hinzufügen die uno Klasse .uno.
• Im #img4 vergessen haben

  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>