Cross-browser (IE 10 & 11) grayscale issue

问题

I am having an issue creating a grayscale effect on the navigation slider for this site - pts.smartchurchproject.com. You will notice that the effect works on Chrome, Firefox, and IE < 10 & 11. IE 10 and 11 are the issue because they dropped support for CSS filters.

I am currently using this fix to deal with IE 10 & 11. http://www.majas-lapu-izstrade.lv/cross-browser-grayscale-image-example-using-css3-js-v2-0-with-browser-feature-detection-using-modernizr/

It is working well for the hover effect, but I want the navigation profile to stay color when it is clicked and expanded. I thought this would be an easy fix, but I am having a bugger of a time getting it to work. Any suggestions? Here is the relevant script for the site. Thanks for any help!

walkingmiller

var gry = jQuery;
gry.noConflict();
gry(document).ready(function () {

/**
Script tests browser features and tells if the Browser is IE10 or IE11
Target IE 10 with JavaScript and CSS property detection.
# 2013 by Tim Pietrusky
# timpietrusky.com
**/

// IE 10 only CSS properties
var ie10Styles = [
    'msTouchAction',
    'msWrapFlow'
];

var ie11Styles = [
    'msTextCombineHorizontal'
];

/*
 * Test all IE only CSS properties
 */

var d = document;
var b = d.body;
var s = b.style;
var brwoser = null;
var property;

// Tests IE10 properties
for (var i = 0; i < ie10Styles.length; i++) {
    property = ie10Styles[i];
    if (s[property] != undefined) {
        brwoser = "ie10";
    }
}

// Tests IE11 properties
for (var i = 0; i < ie11Styles.length; i++) {
    property = ie11Styles[i];
    if (s[property] != undefined) {
        brwoser = "ie11";
    }
}

//Grayscale images only on browsers IE10+ since they removed support for CSS grayscale filter
if (brwoser == "ie10" || brwoser == "ie11") {
    gry('body').addClass('ie11'); // Fixes marbin issue on IE10 and IE11 after canvas function on images
    gry('.akkord_slideri img').each(function () {
        var el = gry(this);
        el.css({
            "position": "absolute"
        }).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale ieImage').css({
            "position": "absolute",
            "z-index": "5",
            "opacity": "0"
        }).insertBefore(el).queue(function () {
            var el = gry(this);
            el.parent().css({
                "width": this.width,
                "height": this.height
            });
            el.dequeue();
        });
        this.src = grayscaleIe(this.src);
    });

    // Quick animation on IE10+
    gry('.akkord_slideri img').hover(
        function () {
            gry(this).parent().find('img:first').stop().animate({
                opacity: 1
            }, 200);
        },
        function () {
            gry('.img_grayscale').stop().animate({
                opacity: 0
            }, 200);
        }
    );
    gry('.akkord_slideri img').click(
        function () {
            gry(this).parent().find('img:first').stop().animate({
                opacity: 0
            }, 200);
        }

    );
    // Custom grayscale function for IE10 and IE11
    function grayscaleIe(src) {
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        var imgObj = new Image();
        imgObj.src = src;
        canvas.width = imgObj.width;
        canvas.height = imgObj.height;
        ctx.drawImage(imgObj, 0, 0);
        var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
        for (var y = 0; y < imgPixels.height; y++) {
            for (var x = 0; x < imgPixels.width; x++) {
                var i = (y * 4) * imgPixels.width + x * 4;
                var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
                imgPixels.data[i] = avg;
                imgPixels.data[i + 1] = avg;
                imgPixels.data[i + 2] = avg;
            }
        }
        ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
        return canvas.toDataURL();
    };
};

// If the browser does not support CSS filters filters, we are applying grayscale.js function
// This part of Grayscale images applies on Opera, Firefox and Safari browsers
if (!Modernizr.cssfilters) {
    var gryimages = gry(".akkord_slideri img"),
        imageCount = gryimages.length,
        counter = 0;

    // One instead of on, because it need only fire once per image
    gryimages.one("load", function () {
        // increment counter every time an image finishes loading
        counter++;
        if (counter == imageCount) {
            // do stuff when all have loaded
            grayscale(gry('.akkord_slideri img'));
            gry(".akkord_slideri img").hover(
                function () {
                    grayscale.reset(gry(this));
                },
                function () {
                    grayscale(gry(this));
                }
            );

        }
    }).each(function () {
        if (this.complete) {
            // manually trigger load event in
            // event of a cache pull
            gry(this).trigger("load");
        }
    });
}});

来源：https://stackoverflow.com/questions/23396267/cross-browser-ie-10-11-grayscale-issue