Question

JQuery addclass根本没有添加类，因此web-kit转换不起作用。在下面的函数中，第一个add类正在工作，而第二个不是。发生了什么事。

功能

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不是。这是我做的一个非常相似的小提琴。 http://jsfiddle.net/4WmJz/15/

任何想法。

非凡

Answer 1

您忘记在样式中添加!important标记，但是您在小提琴的前半部分使用了它。这就是它与第一个元素合作的原因。

默认情况下，应用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;
}

你固定的小提琴：http://jsfiddle.net/4WmJz/16/

Answer 2

而不是

#reviews #test {
opacity:0.0;filter:alpha(opacity=0);
-webkit-transition-property:opacity, filter;
-webkit-transition-duration:600ms ,600ms;
 }

这样做：

 #reviews .hidden{
 opacity:0.0;filter:alpha(opacity=0);
 -webkit-transition-property:opacity, filter;
-webkit-transition-duration:600ms ,600ms;
}

然后这样做：

   <div id="test" class='hidden'>moved</div>

Andupdate js to this：

$('#moveIt').click(function() {
$('#dropout').addClass('dropopen');
$('#test').removeClass('hidden');
$('#test').addClass('test');
return false;
});

WebKit Transitions JQuery AddClass什么都不做

2 个答案: