Question

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

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

call append（）=＆gt;将类添加到element =＆gt;过渡开始=＆gt;附加元素，并取消当前转换=＆gt; append（）finish =＆gt; 没有其他过渡发生

为了证明我的假设，在示例2中，我使用setTimeout（）调用来包装addClass（）。在这种情况下，转换正常。

我的假设是正确的吗？示例2中的解决方案是否是解决此问题的简洁方法？请帮忙，谢谢！

＆＃13;

$('.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");
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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>

jQuery .append（）不同步？

2 个答案: