WebKit Transitions JQuery AddClass does nothing
-
28-10-2019 - |
题
JQuery addclass is not adding a class at all and thus web-kit transitions are not working. In the function below the first add class is working whereas the second is not. What is going on.
Function
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;
}
Content closed is working perfectly. .slideback is not. Here is a very similar fiddle that I made. http://jsfiddle.net/4WmJz/15/
Any ideas .
Marvellous
解决方案
You forgot to add the !important
flags to your styles, but you used it in the first half of your fiddle. That's why it worked with the first element.
By default CSS rules are applied in a certain order. More specific selectors override more general ones, so if you add a class (general) to an element, the CSS rule set for the item ID (specific) will take priority.
.slideback {
opacity:1.0 !important;filter:alpha(opacity=100) !important;
-webkit-transition-property:opacity !important;
-webkit-transition-duration:600ms !important;
}
Your fixed fiddle: http://jsfiddle.net/4WmJz/16/
其他提示
Instead of
#reviews #test {
opacity:0.0;filter:alpha(opacity=0);
-webkit-transition-property:opacity, filter;
-webkit-transition-duration:600ms ,600ms;
}
Do this:
#reviews .hidden{
opacity:0.0;filter:alpha(opacity=0);
-webkit-transition-property:opacity, filter;
-webkit-transition-duration:600ms ,600ms;
}
Then do this:
<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;
});