使用jquery添加類動畫onclick

Question

我想添加一個動畫類到我的div使用jQuery的onclick，但它似乎並沒有工作。有人會介意花幾秒鐘看看我的小提琴並向我解釋原因嗎？謝謝。一般來說，我試圖完成的是我希望div在單擊按鈕時放大。

https://jsfiddle.net/dLko979f/

<div id="clickable"> 
<a href=# name="enlarge" onclick="return false;">Click to enlarge</a> 
</div> 

$(function() {      //run when the DOM is ready 
    $("#clickable > a").onClick(function() { //use a class, since your ID gets mangled 
    $("#clickable").addClass(".popout");  //add the class to the clicked element 
    }); 
}); 

#clickable { 
background: #eee; 
color: #fff; 
font-size: 2em; 
left: 112px; 
padding: 40px; 
position: absolute; 
top: 200px; 
} 
.popout { 
    animation: popout 1s ease; 
    -webkit-animation: popout 1s ease; 
    -webkit-animation-fill-mode: forwards; 
    animation-fill-mode: forwards; 
} 
@keyframes popout { 
    from{transform:scale(1)} 
    to{transform:scale(1.5)} 
} 
@-webkit-keyframes popout { 
    from{transform:scale(1)} 
    to{transform:scale(1.5)} 
} 

Answer 1

我修改你的小提琴。

你哪裏不太遠...
但是你有一對夫婦的語法錯誤。
而在撥弄沒有的jQuery lib中...）

您的代碼更正：

$(function() {      //run when the DOM is ready 
    $("#clickable a").click(function() { //use a class, since your ID gets mangled 
    $("#clickable").addClass("popout");  //add the class to the clicked element 
    }); 
}); 

在此Fiddle

Answer 2

$("#clickable a").click(function() { 
$("#clickable").addClass("popout"); 
});