title: Fade Out CSS Jquery OnClick Event
body: <p>I am trying to fade out the current div by changing the css properties on the <code>onclick</code> event. The div is hidden successfully but the animation doesn't work. Any ideas as to why?</p>
  
  <pre><code>&lt;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');"&gt;
  Click me to hide
  &lt;/div&gt;
  &lt;div id="thevideo" style="display: none;"&gt;
    &lt;iframe id="iframe" width="1280" height="720" src="https://www.youtube.com/truncated..." frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  </code></pre>