Web -Kit -Übergänge links Funktionen nicht funktionieren - eine Geige lösen

Question

Ich habe enorme Probleme mit der Position: Relatives Element im Webkit -Übergang, um sie nach links zu bewegen. Es sollte funktionieren, aber nicht. Eine Klasse wird über JQuery hinzugefügt, die dann wirksam werden sollten.

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

Vielleicht könnte eine Geige helfen http://jsfiddle.net/4wmjz/1/

Irgendwelche Ideen?

Wunderbar

Answer 1

Gelöst! (Ich hoffe)

Es gab ein paar Probleme. Erstens der onclick() Die Funktion wurde nicht korrekt gebunden, JQuery wurde nicht auf der JSFiddle -Seite geladen, und vor allem war die Spezifität Ihrer Selektoren falsch. Grundsätzlich #id #id Der Selektor hat eine größere Spezifität als #id .class, Selbst wenn die Klasse dem Element korrekt hinzugefügt würde, würden die Eigenschaften nicht angewendet.

Bearbeiten Eine andere Gelegenheit, mit einem zu verknüpfen große Visualisierung der CSS -Spezifität.