Preventing animation based on boolean

Question

As many of you will be aware, animating PNG's with alpha transparency in <IE8 does not work very well. Therefore I would simply like to disable animating opacity in <IE8.

The only way I can see doing something like this is by doing this:

HTML

<!--[if lt IE 8]>
    <script type="text/javascript">
        var browserUnsupported = true;
    </script>
<![endif]-->

JAVASCRIPT

// Test if the browser is supported
if(browserUnsupported){
    // Hide the element
    $('#test').hide();
}else{
    // Fade out the element and then hide it
    $('#test').animate({
        opacity:0   
    },200,function(){
        $(this).hide();
    })
}

// Once the animation has completed, continue
setTimeout(function(){
    // This will execute once the animation has completed
    // We cannot use the callback in case the browser is unsupported
    // and the animate function has not been used
},200);

But this is a pretty long winded fix, especially if you consider that every time I would like to animate something, I have to do this.

Can anybody come up with any better alternatives?

Can you turn of animating opacity in Internet Explorer 8 and below? If there is a hack, please consider that I do not store my jQuery locally, I load it from the Google CDN. I will not be willing to alter the jQuery source, even if this is the only option.

UPDATE

I am not looking for a better method of detecting the browser version. The above code was just for illustrative purposes. What I would like to know is whether there is a way I can control the opacity animating by jQuery? Or, is there a better way to animate if condition, don't animate if not?

UPDATE

Something like this (not tested):

function myAnimate(styles,duration,easing,callback){
    // Get the selected element
    var element = this.elements;
    if($.browser.msie && $.browser.version<8){
        delete options.opacity;
    }
    // Call the animation method
    element.animate(options,duration,easing,callback);
}

This question has already been answered and apparently IE does support animating alpha transparency in PNG's. Check out http://stackoverflow.com/a/4126528/861940 — Bruno, Nov 23 '12 at 12:46
@Bruno Once again, please read the question in detail. This is not the correct fix. What about CSS background images? I have already determined that the background images cannot be animated in IE properly, with or without fixes. I simply want to disable it — Ben Carey, Nov 23 '12 at 12:59

toxicate20 · Accepted Answer · 2012-11-23T13:06:55.477

1

For example by using $.browser and $.browser.version() from jQuery

if($.browser.msie && $.browser.version < 8) {
 //fallback
} else {
 //real code
}

Edit

You could write your own execution function that extends jQuery to run functions based on conditions. If you had you condition being not internet explorer, then you could probably make sure that this kind of functions will not be called if you are in IE. The execute function could look like this (not tested it though)

$.fn.execute = function(a) {
    return this[a].apply(this, [].slice.call(arguments, 1));
}

condition = $.browser.msie;
$('div').execute(condition ? 'true' : 'false', function() {...});

edited Nov 23 '12 at 13:06

answered Nov 23 '12 at 12:48

toxicate20

5,270
3
26
38

Detecting whether the browser supports opacity is not the issue here! I am trying to come up with a good method of preventing the browser from animating if I know that the browser is unsupported – Ben Carey Nov 23 '12 at 12:49
Please see my update. At the moment this answer is not relevant to my actual question, regardless of whether the info is helpful. If you are able to update it with an answer to the question I will remove the downvote and accept the answer – Ben Carey Nov 23 '12 at 12:54
Still not sure If I'm getting your question correctly, but I've edited my answer. – toxicate20 Nov 23 '12 at 13:07
Have removed downvote :-), it is similar to what I am looking for, but I think I have done it anyway. Will post up in a min – Ben Carey Nov 23 '12 at 13:08
Is the `browser` object in jQuery fully supported and reliable or is it a recent addin? – Ben Carey Nov 23 '12 at 13:14
The $.browser property is deprecated in jQuery 1.3, and its functionality may be moved to a team-supported plugin in a future release of jQuery. – toxicate20 Nov 23 '12 at 13:18
Exactly, so cannot be relied on. – Ben Carey Nov 23 '12 at 13:19

score 0 · Answer 2 · answered Nov 23 '12 at 12:58

0

$().fadeOut does exactly what you want - animates the opacity and then hides:

if(ie){
  $("#test").hide()
}else{
  $("#test").fadeOut(200)
}

If you like terse code, you could do

$("#test").fadeOut(supported && 200)

Alternatively, you could disable all animations globally

if(ie) $.fx.off = true;

or wrap your logic in a function that you can even add to jQuery:

$.fn.fadeIfSupported = function(){
  if(unsupported){
    this.hide()
  }else{
    this.fadeOut.apply(this, arguments)
  }
}
...
$("#test").fadeIfSupported(200);

answered Nov 23 '12 at 12:58

John Dvorak

26,799
13
69
83

I am not just animating opacity, this was just as an example. Otherwise the fix would be pretty simple as you have shown. FadeOut is not suitable. But your suggestion has given me an idea to just rewrite the animate method. That is probably what I will do :-) – Ben Carey Nov 23 '12 at 13:01
@BenCarey you can still extend jQuery with your implementation so you only write it once – John Dvorak Nov 23 '12 at 13:02
I will post up what I mean, I don't mean a complete rewrite of the animate method. – Ben Carey Nov 23 '12 at 13:03

Preventing animation based on boolean

2 Answers2