adding 'if' logic to a jQuery chain

Question

Let's say I have the following jQuery:

// pseudocode  :
$(this)
    .doSomething
    .doSomething
    .selectSomething
        .doSomething
        .animate({ 
            opacity: 1
        }, 150)
        .end()
    .selectSomethingElse
        .doSomething

I want the above to execute. However, if the browser is IE, I don't want the animate part to execute (due to IE being unable to animate objects with transparent PNGs and retain PNG transparency).

Is there anyway to maintain the nice chained jquery syntax but somehow skip the animate part based on some if logic (in this case testing for IE)?

Answer 1

You can do an each() and pass a function to it which handles the animation, that should work.

$(this)
    .doSomething
    .doSomething
    .selectSomething
        .doSomething
        .each(function() {
            // Will return false on IE, true on others
            if(jQuery.support.opacity) {
                $(this).animate({ 
                    opacity: 1
                }, 150);
            }
        })        
    .end()
.selectSomethingElse
    .doSomething

Answer 2

I'd have a block of code before this which checks for IE and, if found, removes whatever selector the first ".selectSomething" is using. Or, modify .selectSomething slightly so it checks an additional class that is only present in non-IE browsers.

It'd help keep your browser-detection logic separate.

Answer 3

You can use filter to filter out IE:

$(this).filter(function() {
    return $.support.opacity;
}).animate({ 
    opacity: 1
}, 150);