如何解决WebKit Transitions JQuery AddClass什么都不做
| 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;
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。