title: JQuery hover function opacity animation
body: <p>trying to animate a <code>divs</code> <code>opacity</code> when hovering some other element. First I tried it with <code>display</code> <code>none</code>/<code>block</code>, but it read somewhere it's impossible to make a transition for that.</p>
  
  <p>This is a little complicated, because this is supposed to work on each element of the same type with a different id the same. (Picture gallery with a caption to appear on the bottom of the <code>img</code> element when the picture is hovered.)</p>
  
  <p>The HTML structure is like this:</p>
  
  <pre><code>&lt;article id="{PostID}"&gt;
      &lt;div class="post-content"&gt;
          &lt;a&gt;&lt;img&gt;&lt;/a&gt;
          &lt;div class="post-content--padded"&gt;
              &lt;p&gt;Caption of the picture.&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/article&gt;
  </code></pre>
  
  <p>First I went with a <code>mouseover</code>, <code>mouseout</code> approach added to the <code>post-content</code> <code>div</code> which looked like this:</p>
  
  <pre><code>onmouseover="document.getElementById('{PostID}').getElementsByClassName('post-content--padded')[0].style.opacity='1.0';" onmouseout="document.getElementById('{PostID}').getElementsByClassName('post-content--padded')[0].style.opacity='0.0';"
  </code></pre>
  
  <p>That worked, but there was no <code>transition</code>. I've set the CSS up with transition handlers to apply to all the css changes within <code>post-content--padded</code> like so:</p>
  
  <pre><code>-webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  </code></pre>
  
  <p>This doesn't seem to affect the <code>mouseover</code>, <code>mouseout</code> opacity change I do, so I tried adding <code>.animate()</code> to that, without much success. Well I got <code>post-content</code> to fade in and out, but not <code>post-content--padded</code></p>
  
  <p><strong>Different approach</strong></p>
  
  <p>That all didn't work so much. So I tried using the <code>JQuery</code> function <code>hover()</code>.
  Long story short I added this above the html in question:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function(){
      $('#{PostID}.post-content').hover(
      function(){ $('#{PostID}.post-content.post-content--padded').stop().animate({'opacity': '1'}, 'slow');},
      function(){ $('#{PostID}.post-content.post-content--padded').stop().animate({'opacity': '0'}, 'slow');}
      );
   });
  &lt;/script&gt;
  </code></pre>
  
  <p>This just doesn't want to work though. Endless browsing of <code>stackoverflow</code> and other sources didn't seem to help me with this. Being stuck on this for over an hour I decided to simply ask. It cannot be that hard to add a hover > opactiy transition.</p>
  
  <p>Hope I've not been clear and people understand my issue here.</p>