LearntoExcel LearntoExcel - 2 years ago 155
Javascript Question

Add Class animation onclick using jquery

I am trying to add an animation class to my div using jquery onclick but it doesn't seem to be working. Would someone mind taking a few seconds to look at my fiddle and explain to me the reason? Thank you. What I am trying to accomplish in general terms is that I want the div to scale up upon clicking the button.


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

$(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 {
@-webkit-keyframes popout {

Answer Source

I modified your fiddle.

You where not too far...
But you had a couple syntax errors.
And no jQuery lib in fiddle... ;)

Your code corrected:

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

Working in this Fiddle

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download