Javascript 如果 CSS3 过渡不存在，则使用 Modernizr 和 jQuery 来制作动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6098856/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using Modernizr and jQuery to Animate if CSS3 Transitions Don't Exist
提问by JacobTheDev
Is there a way to use a combination of Modernizr and jQuery to enable something similar to transitions if CSS3 isn't supported? What I'm currently doing is like this...
如果不支持 CSS3，有没有办法使用 Modernizr 和 jQuery 的组合来启用类似于转换的功能？我现在的做法是这样的...
<div class="hoverable">
<p>This div changes both width and height on hover</p>
</div>
The CSS is
CSS是
.hoverable {
height: 100px;
width: 2000px;
transition: height .5s, width .5s;
}
.hoverable:hover {
height: 200px;
width: 100px;
}
I'm currently just using Modernizr to make the div be in the hover state by default if CSS3 transitions aren't supported. Is there a way to use Modernizr to trigger jQuery animation if CSS3 isn't supported? If not jQuery, then I'd be fine using custom animation, too, but I don't really know how to do either.
如果不支持 CSS3 转换，我目前只是使用 Modernizr 使 div 默认处于悬停状态。如果不支持 CSS3，有没有办法使用 Modernizr 来触发 jQuery 动画？如果不是 jQuery，那么我也可以使用自定义动画，但我也不知道该怎么做。
回答by JacobTheDev
Solved this myself. The way I did was like this
自己解决了这个问题。我的做法是这样的
<!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>
That worked perfectly. The CSS one only animates in new browsers (because that's the only place it can) and the JS one only animates in old browsers. If you use this script, you can get modernizr from http://www.modernizr.com/and jQuery from http://www.jquery.com/(of course).
那工作得很好。CSS 只能在新浏览器中制作动画（因为这是它唯一可以的地方），而 JS 只能在旧浏览器中制作动画。如果使用这个脚本，你可以从Modernizr的http://www.modernizr.com/从和jQuery http://www.jquery.com/（当然）。
回答by amustill
You can use:
您可以使用：
if(!Modernizr.csstransitions) { // Test if CSS transitions are supported
$('#myDiv').bind({
mouseenter: function() {
$(this).animate({
width: 1000,
height: 1000
}, 1000);
},
mouseleave: function() {
$(this).animate({
width: 100,
height: 100
}, 1000);
}
});
}
