防止基于布尔值的动画

Question

你们中的许多人都知道，在<IE8 中使用 alpha 透明度为 PNG 制作动画效果并不好。因此，我只想在 <IE8 中禁用动画不透明度。

我能看到这样做的唯一方法是这样做：

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

但这是一个相当冗长的修复，特别是如果您认为每次我想制作动画时，我都必须这样做。

谁能想出更好的选择？

您能否在 Internet Explorer 8 及更低版本中关闭动画不透明度？如果有黑客攻击，请考虑我没有在本地存储我的 jQuery，我从 Google CDN 加载它。即使这是唯一的选择，我也不愿意更改 jQuery 源代码。

更新

我不是在寻找更好的方法来检测浏览器版本。上面的代码仅用于说明目的。我想知道的是是否有一种方法可以控制 jQuery 动画的不透明度？或者，是否有更好的方法来为 if 条件设置动画，如果不是，请不要设置动画？

更新

类似这样的东西（未测试）：

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

Answer 1

例如，使用 jQuery 中的 $.browser 和 $.browser.version()

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

编辑

您可以编写自己的执行函数，扩展 jQuery 以根据条件运行函数。如果你的条件不是 Internet Explorer，那么你可以确保在 IE 中不会调用此类函数。执行函数可能看起来像这样（虽然没有测试过）

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

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

Answer 2

$().fadeOut 完全符合您的要求 - 为不透明度设置动画然后隐藏：

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

如果你喜欢简洁的代码，你可以这样做

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

或者，您可以disable all animations globally

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

或者将你的逻辑封装在一个你甚至可以添加到 jQuery 中的函数中：

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