在固定时间后将图像从灰度转换为全彩色时，我遇到了 Jquery 与 CSS Transition 交互的问题，我不确定应该如何解决:
如果我从现有的 #globecont img { 样式开始并将 .globefc 从类更改为 #globefc:hover一切正常。但是，当我在延迟后使用 Jquery 将其作为类应用时 - “类”已正确添加到 IMG，但过滤器中没有发生任何转换或更改。
我还没有尝试使用 .trigger("hover") 代替 .addClass() 但不管它是否有效，有人可以解释为什么这不像写的那样有效吗？
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
body {background-color:#000000;}
#globecont {position:relative; margin-left:auto; margin-right:auto; text-align:center;}
#globecont img {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
transition: 3s;
}
.globefc {
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
filter: none;
}
</style>
</head>
<body>
<div id="globecont"><img src="http://philanthropicsandbox.org/wp-content/uploads/2012/12/Globe1.png" width="300" height="300" id="globe"></div>
<script>
$(document).ready(function() {
$('#globe').delay(500).addClass("globefc");
});
</script>
</body>
</html>
最佳答案
问题是，#globecont img 是一个比 .globefc 更具体的选择器，这意味着它会覆盖 .globefc 添加的样式，即使它在样式表的下方。
您可以通过使第二个选择器更具体来解决此问题:
#globe.globefc {
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
filter: none;
}
JSFiddle Demo
注意:在您的 html 中，您已经将类 .globefc 添加到图像中，因此 jQuery 实际上没有做任何事情。在 JSFiddle 中，我删除了那个类，因为它是在 500 毫秒后由 jQuery 添加的。
关于javascript - Jquery .addClass() 阻止 css 转换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33044188/