淡出CSS JQuery OnClick活动

Question

我试图通过更改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>

Answer 1

为什么不创建函数并添加事件。尝试避免添加内联脚本。这不是一个好习惯，下面的示例示例：

var fade_speed = 50; //500 ms
function fadeOut() {
    var fadeTarget = document.getElementById("clickme");
    var fadeEffect = setInterval(function () {
        if (!fadeTarget.style.opacity) {
            fadeTarget.style.opacity = 1;
        }
        if (fadeTarget.style.opacity < 0.1) {
            fadeTarget.style.display = "none";
            clearInterval(fadeEffect);
        } else {
            fadeTarget.style.opacity -= 0.1;
        }
    }, fade_speed);
}
document.getElementById("clickme").addEventListener('click', fadeOut);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clickme" style="position:relative;">
  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>
<span>TEST, ignore me</span>

选项2，jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clickme" style="position:relative;">
  Click me to hide
</div>
<div id="thevideo">
  <iframe id="iframe" width="1280" height="720" src="https://www.youtube.com/truncated..." frameborder="0" allowfullscreen></iframe>
</div>
<span>TEST, ignore me</span>
<script>
  // A $( document ).ready() block.
  $(document).ready(function() {
    $('#clickme').click(function() {
      $('#thevideo').fadeOut(500);
    });
  });
</script>