ie8不支持transform: translateY，ie9支持不友好

transform: translateY(0);  ie8 不支持这个属性  但是我觉得用css实现的效果特好 特自然 也许是我的脚本写的不够完善 呵呵    现在我希望其他 主流的浏览器应用CSS3 其他不兼容的就给一个不是很差的效果

判断是否支持的代码

 function supportCss3(style) {
    var prefix = ['webkit', 'Moz', 'ms', 'o'],
    i,
    humpString = [],
    htmlStyle = document.documentElement.style,
    _toHumb = function (string) {
    return string.replace(/-(\w)/g, function ($0, $1) {
    return $1.toUpperCase();
    });
    };


    for (i in prefix)
    humpString.push(_toHumb(prefix[i] + '-' + style));


    humpString.push(_toHumb(style));


    for (i in humpString)
    if (humpString[i] in htmlStyle) return true;


    return false;
}

然后用法

if(!supportCss3('animation-play-state')){ 是否支持 不支持就条用里面的代码
$(".figure .figcaption").css({
    top: '180px'
});
$(".figure .figcaption-btn").css({
    top: '-180px'
});
$(".figure").hover(function() {
    var b1=$(this).find('.figcaption');
    var b2= $(this).find('.figcaption-btn');
    if(!b1.is(":animated")){
        b1.animate({top:'0',opacity: '.8'});
        b2.animate({top:'0',opacity: '1'});
    }




}, function() {
   $(this).find('.figcaption').stop(false,true).animate({top:'180px',opacity: '0'});
    $(this).find('.figcaption-btn').stop(false,true).animate({top:'-180px',opacity: '0'});
});

}

转载于:https://www.cnblogs.com/xiaominwu/p/4348030.html