jQuery .append（）不同步？

Question

我的目標是在div上添加一個懸停類，並對它有一個轉換效果。但是我需要首先將該元素附加到父級，只是爲了使其始終位於其他級別之上。當z索引不可用時（例如，SVG沒有z索引），這是一種模擬z索引效應的技巧。

但在示例1中，轉換效果不起作用。我的假設是addClass（）發生在元素完成追加之前。這樣的過程是這樣的，

呼叫追加（）=>添加類元素=>過渡開始=>附加 元件，並且電流的過渡被取消=>附加（）光潔度沒有其他=> 發生轉換

爲了證明我的假設，在示例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>