Web Kit Transitions Left functionality not working -- Solve a Fiddle

I'm having enormous trouble with the position:relative element in webkit transition to move it to the left. It should work but does not. A class is added via jQuery that should then take effect.

<div id="reviews">
    <div id="dropout">Blast</div>

    <a href="#" onclick="dropout(); return false">move it</a>
</div>

#reviews #dropout {
    position:relative;
    min-height:40p开发者_运维知识库x;
    left:40px;
    -webkit-transition: left 600ms;
    -moz-transition: left 600ms;
}
#reviews .dropopen {
    min-height:40px;
    left:0px;
    -webkit-transition: left 600ms;
    -moz-transition: left 600ms;
}

function dropout() {
    $('#dropout').addClass('dropopen');
}

Perhaps a Fiddle might help http://jsfiddle.net/4WmJz/1/

Any ideas?

Marvellous

Solved! (I hope)

There were a couple of problems. Firstly the onclick() function was not bound correctly, jQuery was not loaded on the jsFiddle page and most importantly, the specificity of your selectors was wrong. Basically #id #id selector has a greater specificity than #id .class, so even if the class was correctly added to the element, the properties would not be applied.

Edit Another occasion to link to a great visualization of CSS specificity.