animating with jQuery

Question

The animation has been done with CSS only. How do I achieve the same animation effects using jQuery? https://jsfiddle.net/20ge4vsz/2/

I tried this:

function main() {
  $('.mydiv').on('mouseenter mouseleave', function(){
    $(this).toggleClass('mydivNew myspanNew', 200);
  });
};

$(document).ready(main); 

Didn't work..

Answer 1

How do I achieve the same animation effects using jQuery?

Updated fiddle

You change these 2 CSS rules names like this

.mydivNew {
  width: 155px;
  height: 150px;
  background-color: #20b2aa;
  border: 2px dotted #20b2aa;
  border-radius: 100%;
  display: inline-block;
  margin: 10px 20px 0px 15px;
}

.mydivNew .myspan {
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  margin: 40px 0px 0px 69px;
}

And your jQuery to this

function main() {
  $('.mydiv').on('mouseenter mouseleave', function(){
    $(this).toggleClass('mydivNew', 200);
  });
};

$(document).ready(main); 

---

And you could write up your script like this instead

$(document).ready(function() {
  $('.mydiv').on('mouseenter mouseleave', function(){
    $(this).toggleClass('mydivNew', 200);
  });
}); 

---

Updated based on comment, using jQueryUI

Updated fiddle

$(document).ready( function() {
  $('.mydiv').on('mouseenter mouseleave', function(){
    $(this).toggleClass('New', 300).find('span').toggleClass('New', 300);
  });
}); 

.mydiv {
  width: 155px;
  height: 150px;
  border: 2px dotted #20b2aa;
  background-color: white;
  border-radius: 100%;
  display: inline-block;
  margin: 10px 20px 0px 15px;
  color: white;
}
.mydiv.New {
  background-color: #20b2aa;
}
.myspan {
  position: absolute;
  margin: 65px 0px 0px 69px;
  display: flex;
  flex-wrap: wrap;
}
.myspan.New {
  margin: 40px 0px 0px 69px;
}

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
      
<div class="mydiv">
  <span class="myspan">A</span>
</div>
<div class="mydiv">
  <span class="myspan">B</span>
</div>