마우스 위치로 불투명도 변경

Question

마우스 위치에 따라 요소 (이 경우 .png)의 불투명도를 변경하려고합니다.

나는 색상이 좋은 예를 발견 http://jsfiddle.net/WV8jX/

var $win = $(window), 
w = 0,h = 0, 
rgb = [], 
getWidth = function() { 
    w = $win.width(); 
    h = $win.height(); 
}; 

$win.resize(getWidth).mousemove(function(e) { 

rgb = [ 
    Math.round(e.pageX/w * 255), 
    Math.round(e.pageY/h * 255), 
    150 
]; 

$(document.body).css('background','rgb('+rgb.join(',')+')'); }).resize(); 

하지만 난 불투명도와 함께 할 수있는 방법을 혼란 스러워요. 나는 부드럽고 매끄러운 효과를 원한다.

모든 도움을 주시면 대단히 감사하겠습니다.

Answer 1

그것은 매우 간단합니다 : 그것은 나에게 이해가되지 않았기 때문에

JSFiddle

$(function(){ 
    var $win = $(window), 
    w = 0,h = 0, 
    opacity = 1, 
    getWidth = function() { 
     w = $win.width(); 
     h = $win.height(); 
    }; 

    $win.mousemove(function(e) { 
     getWidth(); 
     opacity = (e.pageX/w * 0.5) + (e.pageY/h * 0.5); 

     $('#myElement').css('opacity',opacity); 

    }); 
}); 

내가 전체 크기 조정 일을 편집했다.

Answer 2

<div id="wrapper"><h1></h1></div> 

http://jsfiddle.net/WV8jX/159/

var $win = $(window), 
    w = 0, 
    h = 0, 
    opacity = 0, 
    getWidth = function() { 
     w = $win.width(); 
     h = $win.height(); 
    }; 

$win.resize(getWidth).mousemove(function(e) { 

    opacity = (e.pageX/w) * (e.pageY/h); 
    $('h1').text(opacity); 

    $('#wrapper').css('opacity',opacity); 

}).resize();