Webkit Transition fonctionnalité gauche ne fonctionne pas - Résoudre un Fiddle

Question

Je vais avoir d'énormes problèmes avec la position: élément par rapport en transition WebKit pour le déplacer vers la gauche. Il devrait fonctionner, mais ne fonctionne pas. Une classe est ajoutée via jQuery qui devrait alors prendre effet.

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

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

#reviews #dropout {
    position:relative;
    min-height:40px;
    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');
}

Peut-être une force Fiddle aide http://jsfiddle.net/4WmJz/1/

Toutes les idées?

Marvelous

Answer 1

Résolu! (Je l'espère)

Il y avait quelques problèmes. Tout d'abord la fonction onclick() n'a pas été correctement lié, jQuery n'a pas été chargée sur la page jsFiddle et surtout, la spécificité de vos sélecteurs avait tort. Fondamentalement sélecteur #id #id a une spécificité supérieure à #id .class, même si la classe a été ajouté correctement à l'élément, les propriétés ne seraient pas appliquées.

Modifier Une autre occasion de lien vers un grande visualisation de spécificité CSS .