Question

在固定时间后将图像从灰度转换为全色我遇到了Jquery与CSS Transition交互的问题，我不确定应该是什么工作：

如果我开始使用现有的#globecont img {样式并将.globefc从类更改为#globefc:hover，一切正常。但是当我使用Jquery在延迟后将它作为一个类应用时 - “类”被正确地添加到IMG中，但过滤器中没有转换或更改。

我还没有尝试使用.trigger（“hover”）代替.addClass（），但无论是否有效，有人可以解释为什么这不起作用吗？

JS Fiddle Here

<!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>

Answer 1

问题是，#globecont img是一个更具体的选择器，然后是.globefc，这意味着它会覆盖.globefc添加的样式，即使它位于样式表的下方。

您可以通过使第二个选择器更具体来解决此问题：

#globe.globefc {
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    filter: none;
    }

JSFiddle Demo

注意：在你的html中，你已经将类.globefc添加到了图像中，所以jQuery实际上并没有做任何事情。在JSFiddle中，我删除了该类，因为它在jms后添加了500ms。

Jquery .addClass（）可以防止css转换

1 个答案:

JSFiddle Demo