jquery - 多个过渡

Question

昨天我解决了关于 jquery 的问题，它没有正确加载。今天我又遇到了另一个问题：一个元素的两个转换。第一个过渡在页面加载时开始：它淡入。当我不使用第二个过渡时，这个实际上有效。每当有人将鼠标悬停在ul. 问题是悬停过渡“覆盖”了淡入过渡。我的 jsFiddle：http: //jsfiddle.net/2cpX6/6/

提前致谢。

Answer 1

同名的 CSS 规则会相互覆盖，就像任何其他规则一样。

尝试这个：

transition: opacity 2s ease-in, color 0.3s ease-in-out;

请注意，您只需要transitionand -webkit-transition，因为 Firefox 和 Opera 现在完全支持无前缀版本，并且-ms-transition从未存在过。

Answer 2

您不能为相同的规则集放置相同的 CSS 规则而不会被覆盖。这适用于一切。例如，如果您有：

span {
    color: red;
    color: green;
}

跨度将是绿色的。这意味着您不能为同一规则集堆叠转换规则。

您可以使用逗号创建多个单独的转换规则。

transition: opacity 2s ease-in, color .3s ease-in-out;

http://jsfiddle.net/ExplosionPIlls/2cpX6/7/