编辑:这是一个没有modernizr后备.no-csstransition的工作小提琴:http: //jsfiddle.net/xTT5s/12/(我删除了css3缓动效果以避免moz/chrome冲突)
首先,我不太习惯 jQuery,所以这可能是一件非常愚蠢的事情。
好吧,我正在为 IE 的 CSS3 过渡(缓动)回退开发 jQuery .hover .animate。这是 CSS/Jquery 后备的代码:
注意:( .no-csstransitions 是css3选择器的modernizr后备)
section figure {
width: 220px; height: 220px;
box-shadow: 0px 0px 3px rgba(0,0,0,0.15);
overflow: hidden;
float: left;
position: relative;
margin: 0 40px 40px 0;
}
section figure figcaption {
width: 220px; height: 57px;
background: #474747;
position: absolute;
padding: 5px 0 0 10px;
top: 221px;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
section figure:hover figcaption {
margin-top: -63px;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
$(document).ready(function() {
$(".no-csstransitions figure").on({
mouseenter: function() {
$('figcaption', this).stop(true, true).animate({top: "221px"}, 300);;
},
mouseleave: function() {
$('figcaption', this).animate({top: "250px"}, 300);;
}
});
});
1º动画仅在第一个 .hover 后触发
2º .hover 动画效果仅在我将顶部位置设置为 MAX 219 时发生,如果我放置 220 效果不会触发,我不知道为什么。
3º .mouseleave 效果仅在一段时间后发生,figcaption 闪烁到某个位置然后缓动发生......
这是我的 wip 的预览版:http: //fernandofleury.com.br/preview/portfolio/
我将删除溢出:隐藏;所以你们可以看到它。提前致谢!