如果不支持 CSS3，有没有办法结合使用 Modernizr 和 jQuery 来启用类似于过渡的功能？我目前正在做的事情是这样的......
<div class="hoverable">
<p>This div changes both width and height on hover</p>
</div>
CSS 是
.hoverable {
height: 100px;
width: 2000px;
transition: height .5s, width .5s;
}
.hoverable:hover {
height: 200px;
width: 100px;
}
如果不支持 CSS3 转换，我目前只是使用 Modernizr 使 div 默认处于悬停状态。如果不支持 CSS3，有没有办法使用 Modernizr 触发 jQuery 动画？如果不是 jQuery，那么我也可以使用自定义动画，但我也不知道该怎么做。
我自己解决了这个问题。我做的方式是这样的
<!doctype html>
<html>
<head>
<title>Modernizr + jQuery Testing</title>
<script type="text/javascript" src="modernizr.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
if(!Modernizr.csstransitions) { // Test if CSS transitions are supported
$(function() {
$('#js').hover(function(){
$(this).animate({width:'50px',height:'50px'},{queue:false,duration:500});
}, function(){
$(this).animate({width:'100px',height:'100px'},{queue:false,duration:500});
});
});
}
</script>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
div {
border: 1px solid red;
height: 100px;
margin: 25px auto;
width: 100px;
}
#css {
transition: height .5s, width .5s;
-khtml-transition: height .5s, width .5s;
-moz-transition: height .5s, width .5s;
-o-transition: height .5s, width .5s;
-webkit-transition: height .5s, width .5s;
}
#css:hover {
height: 50px;
width: 50px;
}
</style>
</head>
<body>
<div id="js">
JS
</div>
<div id="css">
CSS
</div>
</body>
</html>
效果非常好。 CSS 只能在新浏览器中生成动画（因为这是唯一可以实现的地方），而 JS 只能在旧浏览器中生成动画。如果你使用这个脚本，你可以从http://www.modernizr.com/和 jQuery 来自http://www.jquery.com/（当然）。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
