jquery - Pixastic 去饱和加载和悬停颜色

Question

我有一组图像在加载时必须去饱和，在悬停时必须有颜色。我已经尝试过了，但是悬停不起作用，但它确实会降低负载的饱和度：

$(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");
        });

 });

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

Answer 1

工作演示

// 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