我正在使用一系列CSS3转换,但对于较旧的机械,请使用JQuery UI添加和删除类进行备份。
JQuery UI addClass动画功能齐全。然而,JQuery UI removeClass并没有设置动画,而是延迟动画时间,然后跳到上一个类的属性。
$('.box').addClass('adds', 800); ANIMATING CORRECTLY
$('.box').removeClass('adds', 800); NOT ANIMATING AT ALL
.box {
background:#CCC;
border:1px solid #222;
height:200px;
width:200px;
}
.adds {
height:220px !important;
width:400px !important;
}
我已经设置了一个小提琴,但由于某种原因,这个小提琴什么都不做,不知道为什么。http://jsfiddle.net/aA9LN/4/
有什么想法吗?
惊人的
似乎removeClass
不喜欢!important
关键字。这里有一个关于jsbin的演示:http://jsbin.com/idorud
您可能希望以某种方式重写.adds
类,例如,删除!important
关键字并为css选择器添加特定性,例如#someId div.adds
。
您可以通过使用jquery .animate
函数来完成同样的事情来解决此问题。
$('.box').addClass('adds', 800); //same as before
//now instead, use .animate to transition back with effect
$('.box').animate({ 'height': '220px', 'width': '200px' }, 800);
$('.box').removeClass('adds'); //then just remove the class without any effects