如何将灰度脚本应用于动态加载的图像？

Question

我对编程还比较陌生，因此我想组建一个画廊。 对于导航，我希望获得一些将灰度效果应用于动态加载的拇指的帮助。

当它不是动态加载（v1）时，我可以使它工作。 所有拇指都会在过渡时显示为灰色并逐渐褪色），但对于动态图像拇指（v2）则不会...

我将不胜感激。 谢谢

v1 ：（非动态拇指）

html ：（按预期工作）所有拇指均为灰度，并在悬停时褪色

.....
<div class="sub_nav_wrapper">
    <ul class="sub_nav thumbs">
        <articlep>
            <li class="module variable">
                <img alt="" src="projects/thumbs/print/01.jpg">
                <span class="tn_viewbttn tn_dbttn">view</span>
            </li>
        </articlep>
    </ul>
</div>
.....

 var mainDD = function(el){ var t = this; t.$el = $(el); t.tdcs = []; 

t.lis = t。$ el.find（'articlep'）。children（'li'）;
t.lis.each（function（）{
t.tdcs.push（new mainDDComponent（this））;
}）;

v2：动态

这是动态标记的html：

<div class="sub_nav_wrapper">  
    <ul class="sub_nav thumbs">  
        <section id="projectsp">  
            <div class="content">  
            /*                              
            //*dynamically loaded content - thumbs  

            //----  
            //articlep  = ' <articlep>'
            //+ ' <li class="module variable">'
            //+ '   <img src="projects/thumbs/print/'+picturep+'" alt=""/>'
            //+ '   <span class="tn_viewbttn tn_dbttn">view</span>'
            //+ '   </li>'
            //+ ' </articlep>';
            //----
            */
            </div>
        </section>
    </ul>
</div>

所有拇指均显示为颜色，并且鼠标悬停时只能单独切换为灰度。

$('#projectsp').on('mouseover','articlep>li', function(){
    t.tdcs.push(new mainDDComponent(this));
});

Answer 1

从brillout.com的答案以及Roman Nurik的答案开始 ，并稍微放松了“ no SVG”的要求，您可以仅使用单个SVG文件和一些CSS使Firefox中的图像去饱和。

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg">
    <filter id="desaturate">
        <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
                                             0.3333 0.3333 0.3333 0 0
                                             0.3333 0.3333 0.3333 0 0
                                             0      0      0      1 0"/>
    </filter>
</svg>

更多的看这个问题，