LearntoExcel LearntoExcel - 4 months ago 17
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.

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

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

Comments