WebKit Transitions JQuery AddClass does nothing

Question

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

Answer 1

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/

Answer 2

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;
});