jquery - WebKit 转换 JQuery AddClass 不执行任何操作

Question

JQuery addclass 根本没有添加类，因此 Web-kit 转换不起作用。在下面的函数中，第一个添加类正在工作，而第二个则不起作用。这是怎么回事。

功能

function closecont() {
    $('#contpanel').addClass('contentclosed');
    $('#slideback').addClass('slideback');
}

CSS

.gallery .content #slideback {
    position:absolute;
    background:url(images/ui/cont.png) center top;
    height:44px;
    width:24px;
    top:340px;
    left:254px;
    overflow:hidden;
    opacity:0.0;filter:alpha(opacity=0);
    -webkit-transition-property:opacity;
    -webkit-transition-duration:600ms;
}
.slideback {
    opacity:1.0;filter:alpha(opacity=100);
    -webkit-transition-property:opacity;
    -webkit-transition-duration:600ms;
}

关闭的内容运行良好。 .slideback 不是。这是我制作的一个非常相似的 fiddle 。 http://jsfiddle.net/4WmJz/15/

任何想法。

太棒了

Answer 1

您忘记将 !important 标志添加到您的样式中，但您在 fiddle 的前半部分使用了它。这就是为什么它适用于第一个元素。

默认情况下应用 CSS 规则 in a certain order 。更具体的选择器会覆盖更通用的选择器，因此如果您向元素添加类(通用)，则为项目 ID(特定)设置的 CSS 规则将优先。

.slideback {
    opacity:1.0 !important;filter:alpha(opacity=100) !important;
    -webkit-transition-property:opacity !important;
    -webkit-transition-duration:600ms !important;
}

您的固定 fiddle :http://jsfiddle.net/4WmJz/16/