Question

我正在尝试使用jquery onclick为我的div添加动画类，但它似乎不起作用。有人会花几秒钟看看我的小提琴并向我解释原因吗？谢谢。我想要用一般术语来完成的是我希望div在点击按钮时放大。

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

使用jquery添加类动画onclick

2 个答案: