jquery - 负载时变饱和，悬停时变色

我有一组图像，这些图像在加载时必须降低饱和度，在悬停时必须降低颜色。我已经尝试过了，但是悬停功能不起作用，尽管它在加载时降低了饱和度：

$(window).load(function () {
        $(".box img").pixastic("desaturate");

        $(".box img").mouseenter(function (e) {
            var self = $(this);
            Pixastic.revert(self); // make it colour
        });

        $(".box img").mouseleave(function (e) {
            // make it black n white again
            $(this).pixastic("desaturate");
        });

 });

我在这里看到了其他一些帖子，但似乎都没有用。
我究竟做错了什么？

最佳答案

Working Demo

// original image
var img = document.getElementById("box");
// desaturated image
var img2 = Pixastic.process(img, "desaturate");

//initial mouseover
img2.onmouseover = function(){fix(img2)};

// mouseout
img.onmouseout = function() {
    // reassign to img2
    img2 = Pixastic.process(img, "desaturate");
    // rebind img2 mouseover
    img2.onmouseover = function(){fix(img2)};
}

// revert
function fix(img) {
    Pixastic.revert(img);
}

可能有更好的方法来执行此操作，但是基本上，每次还原或降低饱和度时，都将img替换为canvas元素，反之亦然，这会破坏任何绑定事件。上面的操作是在发生这种情况时重新绑定每个事件。

使用jQueries .on可以完成相同的操作