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