jQuery .append() 不同步？

Question

我的目标是在 div 上添加一个悬停类，并对其产生过渡效果。但我需要先将元素附加到父元素，以使其始终位于其他元素之上。这是在 z-index 不可用时模拟 z-index 效果的技巧（例如 SVG 没有 z-index）。

但在示例 1 中，过渡效果不起作用。我的假设是 addClass() 发生在元素完成附加之前。所以流程是这样的，

调用 append() => 将类添加到元素 => 过渡开始 => 追加 元素，并且当前过渡被取消 => append() 完成 => 没有其他过渡发生

为了证明我的假设，在示例 2 中，我使用 setTimeout() 调用来包裹 addClass()。在这种情况下，过渡工作正常。

那么我的假设是正确的吗？示例 2 中的解决方案是解决这个问题的好方法吗？请帮忙，谢谢！

$('.inner').hover(function(){
    var item = $(this)
    item.parent().append(this);
    if ($('#sel').val() == "1") {
        item.addClass("hover");
    } else {
        setTimeout(function(){
            item.addClass("hover");
        }, 0)
    }    
}, function(){
    $(this).removeClass("hover");
});

.inner {
    position: absolute;
    width: 50px;
    height: 50px;
    background: #999;
    transform: scale(1.0);
    transition: all 0.3s ease-in;
}
.inner.hover {
    transform: scale(1.1)
}
.outer {
    height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="outer">
    <div class="inner" style="left: 0px;">1</div>
    <div class="inner" style="left: 100px;">2</div>
    <div class="inner" style="left: 200px;">3</div>
</div>
<select id="sel">
    <option value="1">1</option>
    <option value="2">2</option>
</select>

Answer 1

是的，你的假设是正确的。引擎removes the element from the DOM and adds it back（$.append 使用appendChild）。这就是setTimeout 正常工作的原因。

Answer 2

下面的效果一样，不用jQuery。除非有特殊原因使用 jquery 来添加悬停效果。

.inner {
    position: absolute;
    width: 50px;
    height: 50px;
    background: #999;
    transform: scale(1.0);
    transition: all 0.3s ease-in;
}
.inner:hover {
    transform: scale(1.1)
}
.outer {
    height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="outer">
    <div class="inner" style="left: 0px;">1</div>
    <div class="inner" style="left: 100px;">2</div>
    <div class="inner" style="left: 200px;">3</div>
</div>
<select id="sel">
    <option value="1">1</option>
    <option value="2">2</option>
</select>