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);
});
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').
You can use the jQuery :visible selector to check whether an element is visible in the layout or not. This selector will also select the elements with visibility: hidden; or opacity: 0; , because they preserve space in the layout even they are not visible to the eye.
jQuery Effect fadeTo() MethodThe fadeTo() method gradually changes the opacity, for selected elements, to a specified opacity (fading effect).
As theIV said you can use the css method, but as an alternative you can use animate: $('#my_element'). animate({ opacity: 0.5 }, 100); this will animate the opacity of you div (and its contents) to 0.5 (from whatever it was to begin with) in 100 milliseconds.
Try $(this).css("opacity")
source
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');
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With