问题描述
|
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不是。这是我做过的非常相似的小提琴。 http://jsfiddle.net/4WmJz/15/
有任何想法吗 。
奇妙
解决方法
您忘记在样式中添加
!important
标志,但是您在小提琴的上半部分使用了它。这就是它与第一个元素一起使用的原因。
默认情况下,CSS规则按特定顺序应用。更具体的选择器会覆盖更通用的选择器,因此,如果将一个类(通用)添加到元素中,则商品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/
, 代替
#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,600ms;
}
然后执行以下操作:
<div id=\"test\" class=\'hidden\'>moved</div>
然后将js更新为:
$(\'#moveIt\').click(function() {
$(\'#dropout\').addClass(\'dropopen\');
$(\'#test\').removeClass(\'hidden\');
$(\'#test\').addClass(\'test\');
return false;
});