jQuery .append() не синхронизирован?

Question

Моя цель - добавить класс зависания в div и иметь эффект перехода на него. Но сначала мне нужно добавить элемент в родительский, чтобы он всегда был поверх других. Это трюк для имитации эффекта z-index, когда z-индекс недоступен (например, SVG не имеют z-индекса).

Но в примере 1 эффект перехода не работает. Мое предположение заключается в том, что addClass() происходит до того, как элемент завершит добавление. Таким образом, процесс, как это,

вызова 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>