Adding if logic to jQuery chaining

Question

Let's say I have the following jQuery:

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

I want this to be done. However, if the browser is IE, I do not want the executable part to be executed (due to the fact that IE was not able to animate objects with transparent PNG and kept PNG transparent).

Is there a way to preserve the pretty jquery syntax, but somehow skip the animation part based on some logic (in this case, for testing IE)?

Answer 1

You can make each()and pass it a function that processes the animation, which 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

filter IE:

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

Answer 3

I would have a code block before that that checks IE and, if found, removes any selector that uses the first ".selectSomething". Or, change .select Something a bit so that it checks for an extra class that is only present in browsers other than IE.

This will help keep the browser detection logic separate.