关于在jQuery动画函数中使用es6箭头函数需要澄清

Question

我有一个带有h1标记的简单网页。我尝试使用jQuery animate属性为元素上的opacity属性设置动画。

我需要的是点击h1它应该改变不透明度0.5。

我的问题这里是我可以在jquery中使用es6箭头函数吗？如下所示，因为当我运行常规语法注释es6代码时，它工作正常。但是当我评论常规语法并尝试运行es6代码时。控制台显示错误。 请就此问题向我提供澄清。

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