淡出CSS Jquery OnClick事件

我试图通过更改

onclick

事件上的css属性来淡出当前div。div已成功隐藏，但动画不起作用。你知道为什么吗

<div style="position:relative;" onclick="thevid=document.getElementById('thevideo');thevid.style.display='block';this.style.opacity='0';this.style.width='0';this.style.height='0';this.style.transition='opacity 1800ms, height 0 1800ms, width 0 1800ms';document.getElementById('iframe').src=document.getElementById('iframe').src.replace('autoplay=0','autoplay=1');">
Click me to hide
</div>
<div id="thevideo" style="display: none;">
  <iframe id="iframe" width="1280" height="720" src="https://www.youtube.com/truncated..." frameborder="0" allowfullscreen></iframe>
</div>

单击我隐藏

为什么不创建一个函数并添加一个事件呢。尽量避免添加内联脚本。这不是一个好的做法，下面是一个示例：

var-fade\u速度=50//500毫秒
函数衰减（）{
var fadeTarget=document.getElementById（“clickme”）；
var fadeEffect=setInterval（函数（）{
如果（！fadeTarget.style.opacity）{
fadeTarget.style.opacity=1；
}
if（fadeTarget.style.opacity<0.1）{
fadeTarget.style.display=“无”；
清除间隔（fadeEffect）；
}否则{
fadeTarget.style.opacity-=0.1；
}
}，衰减速度）；
}
document.getElementById（“clickme”）.addEventListener（“单击”，淡出）

单击我隐藏
测试，忽略我
是否先尝试设置转换？在隐藏它之前？现在尝试了，不起作用..如果可能的话，我更愿意在这个实例中使用onclick事件的代码。如果由于Jquery的限制，这是不可能的，那么我将使用这个函数。或者可能只使用CSS解决方案？事实上，我尝试了这个，动画可以工作，但是div没有设置为显示：none。。。这会留下一个大的白色gapalso。。未捕获的TypeError:无法读取null的属性“addEventListener”。。另一方面pages@JoannaMikalai检查更新的代码，添加
fadeTarget.style.display=“无”这样它也会删除空间。