jquery feature detection - how can I implement this?

Question

I need to prevent IE from recognizing the fadeIn/Out effect in this plugin. How can I add a line of jquery feature detection code to this:

$(function() {

var newHash      = "",
    $mainContent = $("#main-content"),
    $pageWrap    = $("#page-wrap"),
    baseHeight   = 0,
    $el;



$("nav#footer").delegate("a", "click", function() {
    window.location.hash = $(this).attr("href");
    return false;
});

$(window).bind('hashchange', function(){

    newHash = window.location.hash.substring(1);

    if (newHash) {
        $mainContent
            .find("#guts")
            .fadeOut(200, function() {
                $mainContent.show().load(newHash + " #guts", function() {
                    $mainContent.fadeIn(200, function() {
                    });
                    $("nav#footer a").removeClass("current");
                    $("nav#footer a[href="+newHash+"]").addClass("current");
                });
            });
    };

});

$(window).trigger('hashchange');

});

I had some code like

var FADE_TIME = 500; if(!($.support.opacity)) { FADE_TIME = 0}

$('element').fadeOut(FADE_TIME)

Where would I add this in the code? can someone help me get this working for real?please!!

Answer 1

Can't figure out why somebody didn't just edit the code and answer the question. All you needed to do was create a new variable with it's value determined by the $.support.Opacity property then reference that in the fade in/out sections of the code.

$(function() {

var newHash      = "",
    $mainContent = $("#main-content"),
    $pageWrap    = $("#page-wrap"),
    baseHeight   = 0,
    $el,
    // new fadeTime property.
    fadeTime = $.support.opacity ? 500 : 0;



$("nav#footer").delegate("a", "click", function() {
    window.location.hash = $(this).attr("href");
    return false;
});

$(window).bind('hashchange', function(){

    newHash = window.location.hash.substring(1);

    if (newHash) {
        $mainContent
            .find("#guts")
            .fadeOut(fadeTime, function() {
                $mainContent.show().load(newHash + " #guts", function() {
                    $mainContent.fadeIn(fadeTime, function() {
                    });
                    $("nav#footer a").removeClass("current");
                    $("nav#footer a[href="+newHash+"]").addClass("current");
                });
            });
    };

});

$(window).trigger('hashchange');

});

Answer 2

You just want to run something if the user isn't using Internet Explorer?

Try this:

if ($.browser.msie) {
    return false;
} else {
    //do something
}

Answer 3

I presume you're talking the support for the CSS opacity property and not the slightly buggy -ms-filter and filter which IE8 and below uses. In that case, the best method would be to test for the existence of the property in the style object of an element:

if('opacity' in document.createElement('div').style) {
    // Do something that requires native opacity support
}

(You might want to cache the test element there if you want to test multiple properties)