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');

});