Clarification Needed regarding usage of es6 arrow functions inside jQuery animate function [duplicate]

This question already has an answer here:

• arrow function and this 1 answer
• Arrow Functions and This [duplicate] 5 answers
• How to access the correct `this` inside a callback? 6 answers

I have a simple webpage with a h1 tag. I tried to animate the opacity property on the element using jQuery animate property.

What I need is on click of the h1 it should change the opacity 0.5.

My Question Here is Can I use es6 arrow function inside the jquery ? as below, because when I run the regular syntax commenting the es6 code, It Works just fine. but when I comment the regular syntax and try to run es6 code. console shows error. Please provide me clarification regarding this issue.

JS

/************* regular syntax ************/
$(document).ready(function(){
  $("h1").on('click',function(){
    $(this).animate({
      opacity:0.5,
    },2000,function(){
      console.log($(this));
    });
  })
});



/*********** es6 Style ***********/
$(document).ready(()=>{
  $("h1").on('click',()=>{
    $(this).animate({
      opacity:0.5,
    },2000,()=>{
      console.log($(this));
    });
  })
}); 

HTML

<h1>Hellow World</h1>

Fiddle link.