CODEWITHSUNDEEP
jqueryclassanimation
LearntoExcel
LearntoExcel

Reputation: 129

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

Upvotes: 0

Views: 1157

Answers (2)

Mohammad Fared
Mohammad Fared

Reputation: 658

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

Upvotes: 1

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

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

Upvotes: 4

Related Questions