jquery-plugins - 使用 jQuery 和 Pixastic 去饱和效果

Question

有谁知道如何使用 Pixastic 插件和 jQuery 使图像从颜色淡化到完全不饱和？

我试图避免保存两张图片并淡出一张..

Answer 1

我做了相反的事情......让不饱和的图像淡入颜色。在 pixastic 和 livequery 的结合下实现了只有 1 张图像。我基本上克隆了图像，对其中一个副本进行去饱和处理，然后将它们堆叠在一起……在悬停时淡化顶部(去饱和)层。我相信它可以更优雅，但它主要是有效的。你可以在chicagointerhandball.org看到效果在所有“赞助商”标志上

$('.sponsors').load(function() {    
    $('.sponsors').pixastic("desaturate");
}).each(function(index) {
    var clone = $(this).clone().removeClass('sponsors').addClass('sponsors-color').css('opacity',.25);
    $(this).parent().append(clone);
});

$('.sponsors-color').livequery(function(){ 
    // use the helper function hover to bind a mouseover and mouseout event 
        $(this).hover(function() { 
                $(this).stop().animate({"opacity": 1});
            }, function() { 
                $(this).stop().animate({"opacity": 0});
            }); 
    }, function() { 
        // unbind the mouseover and mouseout events 
        $(this) 
            .unbind('mouseover') 
            .unbind('mouseout'); 
    });