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.
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