Question

我在处理应用了box-shadow的DIV容器时遇到了问题。当我像动画一样制作DIV时，它的盒子阴影会在动画中消失。 Here就是我所说的一个例子。难道只是我愚蠢，做错了什么或有问题的解决方案吗？

$('#test').click(function(){
    $(this).hide("blind", 2500);
});

#test {
    border: 1px solid black;
    box-shadow: 0px 0px 20px 1px black;
    height: 100px;
    width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

<div id="test">This is a text.</div>

Answer 1

在上面引用Andi North：

这是因为当jQuery为对象设置动画时，它会设置overflow：hidden;在父母身上。

因此，我通过将overflow: visible !important设置为父容器来解决我的问题。

Answer 2

这是因为当jQuery为对象设置动画时，它会在父overflow: hidden;上设置<div>。

如果您将jQuery动画设置为非常长（120秒），并检查<div>，您应该看到它设置规则。

希望这有帮助！

Answer 3

使用.hide('blind', 2500)会导致jquery在动画时用另一个div包装该元素。

我不确定您的确切目标是什么，但您可以考虑使用.slideUp(2500)代替：

JSFiddle：http://jsfiddle.net/gewfajm3/2/

Answer 4

将其包裹在另一个div中，并使用正确的阴影填充。并且。隐藏包装div。 http://jsfiddle.net/PhilQ/gewfajm3/3/

#test {
    height: 100px;
    width: 100px;
    padding: 20px;
}
#test div {
    position: relative;
    border: 1px solid black;
    box-shadow: 0px 0px 20px 1px black;
    -webkit-box-shadow: 0px 0px 20px 1px black;
    height: 100px;
    width: 100px;
}

<div id="test"><div>This is a text.</div></div>

为什么在jQuery动画期间div上的box-shadow会消失？

4 个答案: