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

}