Jquery fade icon back on mouseout to the value it had before mousenter

Question

I have this code which fades some icons to opacity 1.0 on mouseenter and back to 0.3 on mouseleave. It works great except that I have since have these icons set to opacity 0.13 in a different responsive view, but the code below still fades them back to 0.3 instead of 0.13 on mouse out, which is not what I want.

$(".social-holder img").on("hover", function(e) {
    if(e.type == "mouseenter") {
        $(this).fadeTo('fast', 1.0);
    }
    else if (e.type == "mouseleave") {
        $(this).fadeTo('fast', 0.3);
    }
});

I tried the code below, and I cant understand why it wont work. It leaves the icon at 1.0 on mouseleave

$(".social-holder img").on("hover", function(e) {
    var currentOpacity = $(this).css('opacity');
    if(e.type == "mouseenter") {
        $(this).fadeTo('fast', 1.0);
    }
    else if (e.type == "mouseleave") {
        $(this).fadeTo('fast', currentOpacity);
    }
});

By the way the var currentOpacity seems to work fine, as I checked with the console, but it doesn't seem to get inside the else if statement. Maybe I have some misunderstanding about scope or something.

Have you tried adding some `console.log` messages to see when these events are firing? It's possible your `mouseleave` and `mouseenter` animations are overlapping with each other and/or your other animations. — Kyle, Jan 23 '13 at 17:24
yes i've tried them pretty much everywhere but I still cant see the problem — byronyasgur, Jan 23 '13 at 17:26

Aaron Digulla · Accepted Answer · 2013-01-23T17:59:13.493

1

Your code doesn't work because every time the handler is called, currentOpacity changes. So on mouse leave, this code is executed:

 var currentOpacity = $(this).css('opacity');
 $(this).fadeTo('fast', currentOpacity);

which is an elaborate way to do nothing :-)

Use this code instead:

if(e.type == "mouseenter") {
    // Either preserve the saved value or get current opacity
    var origOpacity = $(this).data('origOpacity') || $(this).css('opacity');
    $(this).fadeTo('fast', 1.0).data('origOpacity', origOpacity);
}
else if (e.type == "mouseleave") {
    var origOpacity = $(this).data('origOpacity');
    $(this).fadeTo('fast', origOpacity, function(){ $(this).removeAttr('style'); });
}

This saves the opacity on enter in the element's data map and gets it back from there.

edited Jan 23 '13 at 17:59

answered Jan 23 '13 at 17:24

Aaron Digulla

321,842
108
597
820

Thanks ... yes that works, but not really great for me. It's a responsive theme and when the window is resized by someone, any previously hovered over icons end up ignoring the css for some reason ... I know it should only be used in one view but it may be resized in a browser for a number of reasons ... I had never heard of the data() function before ... is there any way to have it discard it's contents or something. On juery api as I speak. – byronyasgur Jan 23 '13 at 17:31
The problem is that you don't always get a mouseleave but that's not a problem. Use this code instead in mouseenter: `var origOpacity = $(this).data('origOpacity') || $(this).css('opacity');` – Aaron Digulla Jan 23 '13 at 17:34
With this fix, the start opacity is saved in `data()` and this is always preferred, no matter at which stage of the animation things were interrupted. – Aaron Digulla Jan 23 '13 at 17:36
still has the same effect for me using the new code you posted above – byronyasgur Jan 23 '13 at 17:38
I's mostly there, i suppose all I am looking for now is a bit of jquery to remove the style attribute contents from the element after the mouseleave which is taking priority over the normal css – byronyasgur Jan 23 '13 at 17:44
Use your browser's debugger to make sure the origOpacity is correct. You must find a way to get this value from somewhere when the animation is interrupted. Otherwise, you will always start with different values and that breaks it. – Aaron Digulla Jan 23 '13 at 17:44
Adding extra attributes is most definitely not required for this. – SeinopSys Jan 23 '13 at 17:45
no the code adds it I want to remove it so the css is in charge again after mouseout – byronyasgur Jan 23 '13 at 17:45
@byronyasgur: Try http://stackoverflow.com/questions/4036857/jquery-remove-style-added-with-css-function – Aaron Digulla Jan 23 '13 at 17:45
Thanks - I reckon you deserve the tick at this stage, thanks for your help – byronyasgur Jan 23 '13 at 17:46
ended up getting it work perfectly by adapting the mouseleave's fadeto in your code to remove the style attr when it was finished the fade .... `$(this).fadeTo('fast', origOpacity, function(){ $(this).removeAttr('style'); });` – byronyasgur Jan 23 '13 at 17:56

Jquery fade icon back on mouseout to the value it had before mousenter

1 Answers1