修改跨浏览器灰度滤镜的 jQuery 选择器

Question

希望使用这个跨浏览器灰度滤镜并让它处理所有图像，但我想将效果限制在单个div 中的图像上。

在函数中.js我更改了选择器的所有实例grayscale($('img')); grayscale($('#grayscale-div img'));，并在所有情况下都这样做。它添加了CSS类，但在IE11中效果不再起作用。

我试图看看这是否是我在使用jQuery选择器时犯的错误。提前感谢您为我指出正确的方向。

代码摘录：

if (getInternetExplorerVersion() >= 10){
    $('#grayscale-div img').each(function(){
        var el = $(this);
        el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"5","opacity":"0"}).insertBefore(el).queue(function(){
            var el = $(this);
            el.parent().css({"width":this.width,"height":this.height});
            el.dequeue();
        });
        this.src = grayscaleIE10(this.src);
    });
    // Quick animation on IE10+ 
    $('#grayscale-div img').hover(
        function () {
            $(this).parent().find('img:first').stop().animate({opacity:1}, 200);
        }, 
        function () {
            $('.img_grayscale').stop().animate({opacity:0}, 200);
        }
    );  

Answer 1

IE11 中的getInternetExplorerVersion()条件检查失败。以下更改：

if(getInternetExplorerVersion() >= 10 || !!window.MSInputMethodContext)

将在上面显示的代码中修复它。以下是一些不相关的问题，可以解释问题和解决方案：

• 如何检测IE11？
• 使用 CSS 功能/功能检测检测 IE11