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.