使用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"); 
});