How to animate a class on click using jquery?

Question

I have a div that I wanted to animate when I click another div. I know this can be done easily with jQuery, but somehow I could not get it work.

I have tried the SO suggestion here to add

$('#button').onClick(function(){
$('#target_element').addClass('.animate_class_name');});

but nothing happened.

This is the fiddle https://jsfiddle.net/rdfbcq3j/2/. The goal is to animate the red circle div object into a rectangle when click_me is pushed. What is the best way to do it?

Answer 1

you have syntactically mistake in your script, no need to add . before the class name in addClass() function. A working fiddle is here Use like this

$('#button').on("click",function(){
    $('#target_element').addClass('animate_class_name'); 
});

or,

$('#button').click(function(){
    $('#target_element').addClass('animate_class_name'); 
});

or,

$(document).on("click","#button",function(){
    $('#target_element').addClass('animate_class_name'); 
});

Answer 2

You just misspelled a little with dots. Here is the working jsfiddle:

https://jsfiddle.net/rdfbcq3j/3/

It should be $('.circle').addClass('clicked');, not $('circle').addClass('.clicked');

Answer 3

I was messing around with your code and there was a syntax problem, I removed the dot on clicked. And I used click() instead of onClick. This should fix your problem.

 $('.circle').addClass('clicked');

Javascript

$('.click_me').click(function(){
    $('.circle').addClass('clicked');
});

HTML

<div class="circle">
</div>

<div class="click_me"> Click Me!
</div>

CSS

  .circle {
      position: absolute;
      width: 10%;
      height: 10%;
      border-radius: 50%;
      background: red;
    }

    .clicked {
      animation: rectangularize 3s ease-in-out infinite;
    }

    .click_me {
      position: absolute;
      width: 10%;
      height: 10%;
      left: 50%;
      background: yellow;
      cursor: pointer;
    }
    @keyframes rectangularize {
      30% {
        border-radius: 0%;
      }
    }

Answer 4

You did'nt put a '.' to query the 'circle' element from the DOM and so on. Here is your solved code: https://jsfiddle.net/Lsbcc3rz/

$('.click_me').on('click', function() {

    $('.circle').addClass('clicked');
});