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.

The jQuery approach doesn't work because Tumblr doesn't parse through — technopeasant, Dec 29 '14 at 22:37
Aaaah! That must be it then. Well I'm not replacing anything.. --" — Roman Rutkowski, Dec 29 '14 at 22:43

Mohamed-Yousef · Accepted Answer · 2014-12-29T22:47:54.013

2

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

edited Dec 29 '14 at 22:47

answered Dec 29 '14 at 22:32

Mohamed-Yousef

23,946
3
19
28

Let me try that out. I tried to use css, but it wouldn't work how I wanted it, so going to try this approach now. – Roman Rutkowski Dec 29 '14 at 22:33
That worked. I'd still like to know why the jquery won't work, but this is much less hassle anyway, so thanks. – Roman Rutkowski Dec 29 '14 at 22:35
@RomanRutkowski look at this too http://jsfiddle.net/b5pyqfjn/1/ I add max-height in css so try it also .. about jquery there is a few things you should check .. 1) include jquery to your code . 2) check the selectors you will work with so check {PostID} selector and change it with class is better – Mohamed-Yousef Dec 29 '14 at 22:42
Well I've tested this outside of Tumblr now and it works properly, so it really was Tumblr messing things up. – Roman Rutkowski Dec 29 '14 at 22:48
@RomanRutkowski see the jquery code too .. I updated my answer .. Good Luck :) – Mohamed-Yousef Dec 29 '14 at 22:49
1

Don't use `transition: _all_ 2s`. Specify the property that the transition should be applied to instead, i.e. `transition: opacity 2s` for [better performance](http://stackoverflow.com/questions/8947441/css3-transitions-is-transition-all-slower-than-transition-x). – MiKo Dec 29 '14 at 22:51

score 1 · Answer 2 · answered Jan 07 '16 at 19:36

I also worked on combining hover with animate and it worked like that:

in CSS opacity for "a" = 0

and in jQuery:

$("#classy").hover(function(){
      $("#classy").animate({
          opacity:"1"
      },200);
  }, function(){
      $("#classy").animate({
          opacity:"0"
      },200);
  });

score 0 · Answer 3 · answered Dec 29 '14 at 22:38

0

Here is a jQuery method that works:

HTML

<div id='hover-me'>hover over me</div>
<div id='change-me'>I change opacity</div>

CSS

.hide {
    opacity:0;
}

JS

$('#hover-me').hover( function() {
    if ($('#change-me').hasClass('hide')) {
        $('#change-me').removeClass('hide', 'slow');
    } else {
        $('#change-me').addClass('hide', 'slow');
    }
});

jsFiddle Demo

*This is with jQueryUI included

answered Dec 29 '14 at 22:38

Senju

1,035
10
25

This looks like it would work, however I've been informed Tumblr doesn't parse through – Roman Rutkowski Dec 29 '14 at 22:44

JQuery hover function opacity animation

3 Answers3