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

});



}