jquery - Web Kit Transitions Left 功能不起作用——解决一个小提琴问题

Question

我在 webkit 转换中的 position:relative 元素将其移动到左侧时遇到了巨大的麻烦。它应该工作，但没有。一个类是通过 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');
}

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

有任何想法吗？

奇妙

Answer 1

解决了！（我希望）

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

编辑另一个链接到CSS 特殊性的可视化的场合。