jQuery: Can you find the selected element's opacity with jQuery?

Question

I have a filter running on a set of list elements which fades the lesser desirable elements down to 0.25 opacity but I'd love to have their opacity return to 1 and then back down to 0.25 on hover over and out. Is this fairly simple to do?

I'm only having trouble finding a way to grab the selected element's current opacity so I can store it in a variable for use.

$('#centerPanel li').hover(function(){
        var currentOpacity = $(this).?????
        $(this).fadeTo(1,1);
    },
    function(){
        $(this).fadeTo(1,currentOpacity);
    });

careful with that code. If someone moves their mouse back and forth across it, you'll be stuffed. — nickf, Jun 04 '10 at 09:15

score 34 · Answer 1 · answered Jun 04 '10 at 09:13

34

Try $(this).css("opacity")

source

answered Jun 04 '10 at 09:13

Jeriko

6,547
4
28
40

score 6 · Answer 2 · answered Jan 13 '12 at 00:52

there are complete guide "Get Current Opacity in MSIE using jQuery" http://zenverse.net/get-current-opacity-in-msie-using-jquery-cross-browser-codes/

code:

function getopacity(elem) {
  var ori = $(elem).css('opacity');
  var ori2 = $(elem).css('filter');
  if (ori2) {
    ori2 = parseInt( ori2.replace(')','').replace('alpha(opacity=','') ) / 100;
    if (!isNaN(ori2) && ori2 != '') {
      ori = ori2;
    }
  }
  return ori;
}

//to use it
var currentopacity = getopacity('div.the-element');

score 1 · Answer 3 · answered Jun 04 '10 at 09:17

1

$('#centerPanel li').hover(function(){
    if(!$(this).is(':animated'))
       $(this).animate({opacity: 'toggle'}, 1000);
},
function(){
    if(!$(this).is(':animated'))
       $(this).animate({opacity: 'toggle'}, 1000);
});

answered Jun 04 '10 at 09:17

jAndy

231,737
57
305
359

This doesn't actually answer the question "can you find the selected element's opacity with jQuery"... I didn't -1 you though. – Jeriko Jun 04 '10 at 09:27
1

+1 - While not answering the question directly, it is related to setting opacity of the selected element. In other words your example illustrates a good point. – David Robbins Jun 04 '10 at 09:37
@Jeriko: Don't you think, if an answer differs a little bit from the exact question but is a better solution for the basic problem, should also be mentioned ? – jAndy Jun 04 '10 at 09:38
I totally agree jAndy, which is why I didn't -1 you. I've just noticed more and more that people aren't always looking to be corrected; they just want advice in the scope of their question. If you had first answered him and then suggested a better way to go about it, you would have had a great answer :) – Jeriko Jun 04 '10 at 09:50

score 1 · Answer 4 · answered Jun 04 '10 at 09:26

You need to set the mouseout opacity var outside the function, this will prevent your function to change that value.

nohoverOpacity = $('#centerPanel li').css("opacity");
hoverOpacity = 1;
dur = 1000;
$('#centerPanel li').hover(function(){
        $(this).fadeTo(dur,hoverOpacity);
    },function(){
        $(this).fadeTo(dur,nohoverOpacity);
});

Is this what you want? :)

jQuery: Can you find the selected element's opacity with jQuery?

4 Answers4