jquery - Webkit Transition Left 功能不起作用 -- 解决一个 Fiddle

Question

我在 position:relative 元素在 webkit 过渡中遇到了很大的麻烦，无法将其移动到左侧。它应该工作但没有。通过 jQuery 添加一个类，该类随后会生效。

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

也许 fiddle 可能会有所帮助 http://jsfiddle.net/4WmJz/1/

有什么想法吗？

很棒

Answer 1

Solved ! (我希望)

有几个问题。首先，onclick() 函数没有正确绑定(bind)，jQuery 没有加载到 jsFiddle 页面上，最重要的是，您的选择器的特异性是错误的。基本上 #id #id 选择器比 #id .class 有更大的特异性，所以即使类被正确添加到元素，属性也不会被应用。

编辑 另一个链接到 great visualization of CSS specificity 的场合.