Изменение непрозрачности с положением мыши

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();