如何用jQuery觸發動畫？

Question

我有CSS代碼，動畫圖像，但我想有一個按鈕，使用jQuery觸發動畫。

這是我的CSS和HTML代碼，但它不工作：

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

#img4:hover { 
 
    animation-name: uno; 
 
    animation-duration: 7s; 
 
} 
 

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

<div id="movimiento"> 
 
    <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>

什麼樣的變化，我需要作出所以它是否行得通呢？

Answer 1

您正在將類uno添加到jQuery中，但您沒有相應的針對.uno的CSS規則。

我添加了一個最起碼的風格來顯示此工作：

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

#img4 { 
 
    position: absolute; 
 
    top: 30px; 
 
} 
 

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

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

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

 
<div id="movimiento"> 
 
    <img src="http://placehold.it/200x200" class="img-responsive" id="img4"> 
 

 
    <button class="animar">Entregar Corazón</button> 
 
</div>