JQuery hover function opacity animation

Question

trying to animate a divs opacity when hovering some other element. First I tried it with display none/block, but it read somewhere it's impossible to make a transition for that.

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 img element when the picture is hovered.)

The HTML structure is like this:

<article id="{PostID}">
    <div class="post-content">
        <a><img></a>
        <div class="post-content--padded">
            <p>Caption of the picture.</p>
        </div>
    </div>
</article>

First I went with a mouseover, mouseout approach added to the post-content div which looked like this:

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';"

That worked, but there was no transition. I've set the CSS up with transition handlers to apply to all the css changes within post-content--padded like so:

-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;

This doesn't seem to affect the mouseover, mouseout opacity change I do, so I tried adding .animate() to that, without much success. Well I got post-content to fade in and out, but not post-content--padded

Different approach

That all didn't work so much. So I tried using the JQuery function hover(). Long story short I added this above the html in question:

<script type="text/javascript">
$(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');}
    );
 });
</script>

This just doesn't want to work though. Endless browsing of stackoverflow 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.

Hope I've not been clear and people understand my issue here.

Answer 1

you can do it just using css if you need only on hover

.post-content--padded{
    opacity: 0;
    -webkit-transition: all 2s;
    -moz-transition: all 2s;
    transition: all 2s;
}
.post-content:hover .post-content--padded{
    opacity: 1;
    -webkit-transition: all 2s;
    -moz-transition: all 2s;
    transition: all 2s;
}

see demo HERE

and if you want to use Jquery

$('.post-content--padded').hide();
$('.post-content').hover(function(){
    $(this).find('.post-content--padded').fadeToggle(2000);
});

see demo HERE