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，我从谷歌CDN加载它。我不会愿意改变jQuery源代码，即使这是唯一的选择。

更新

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

更新

像这样（未经测试）：

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

基于布尔值防止动画

2 个答案: