jQuery .append（）不同步？

问题描述：

我的目标是在div上添加一个悬停类，并对它有一个转换效果。但是我需要首先将该元素附加到父级，只是为了使其始终位于其他级别之上。当z索引不可用时（例如，SVG没有z索引），这是一种模拟z索引效应的技巧。jQuery .append（）不同步？

但在示例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>

我认为这是小约（）所做的.append，以及更多关于浏览器还没有渲染的元素呢。但是这与你所说的并不遥远。 –

为什么不在不使用jquery添加悬停类的情况下在纯CSS中进行转换？即：内：悬停{} – JDL

答

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

谢谢，我想我应该使用appendChild。 – wendong

答

以下具有相同的效果，而无需使用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>

是的，这有一个特别的原因。因为我需要对SVG元素执行追加技巧。通过这样做，在Firefox中，悬停状态将会丢失。所以我需要手动添加悬停类到元素。 – wendong

jQuery .append（）不同步？

相关推荐