Add Class animation onclick using jquery

Question

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

Louys Patrice Bessette · Accepted Answer · 2016-07-21 00:40:03Z

4

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

answered Jul 21, 2016 at 0:40

Louys Patrice Bessette

34k7 gold badges41 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Louys Patrice Bessette Over a year ago

My pleasure! ask anytime! ;)

Mohammad Fared · Accepted Answer · 2016-07-21 00:42:00Z

1

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

answered Jul 21, 2016 at 0:42

Mohammad Fared

6661 gold badge8 silver badges22 bronze badges

Collectives™ on Stack Overflow

Add Class animation onclick using jquery

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related