如何保持jQueryUI；“爆炸”。周围div中的effect（）？

我正在创建一个图像滑块，我希望有爆炸效果作为过渡。但问题是，当爆炸发生时，它会飞出周围的div

<div class="outer"> <!-- outer container that the explosion shouldn't spill over -->
    <div class="explode"><img src="http://lorempixel.com/400/200/"/></div><!-- Stuff to explode -->
</div>

我想要的是一种周围有溢出的div：隐藏，这样它就不会覆盖其他页面元素。我试过这个，但没有真正起作用：

---

我是否必须创建我自己的，或者可以这样做，但我只是变得密集？

问题是爆炸效果会创建许多弹片元素，然后将这些元素附加到

主体上。我发现重写这些元素的容器的唯一方法是更改动画的实际代码，以便它在动画元素之后附加这些元素

源代码中的代码段：

el
    .clone()
    .insertAfter( el ) // This was previously .appendTo( "body" )
    .wrap( "<div></div>" )
    .css({
        position: "absolute",
        visibility: "visible",
        left: -j * width,
        top: -i * height
    })

el
.clone（）
.insertAfter（el）//这是以前的.appendTo（“body”）
.wrap（“”）
.css({
位置：“绝对”，
可见性：“可见”，
左：-j*宽度，
顶部：-i*高度
})

请参见
这不起作用的原因是您的效果并没有真正扩展图像本身；它将它切成块，然后使用绝对定位来移动它们。溢出不适用，因为绝对定位将它们从元素堆栈中拉出。也就是说，图像突然出现在包含div的前面的一个层中

如果你想让它起作用，你必须写下你自己的效果。一种方法可能是创建一个由小div组成的网格，并使用图像片段作为背景；然后可以在不同的方向收缩div，使其看起来像是彼此远离。或者，如果你不介意失去“破碎”效果，你可以简单地使图像逐渐扩大和淡出。这可能是最简单的方法。
jquery似乎可以创建具有绝对位置的元素，但我不确定这一点，我认为没有简单的解决方案。试着看看爆炸效果的代码，看看它是如何工作的，这可能会导致一个解决方案。刚刚检查过，你的小提琴看起来很奇怪的部分原因是每次加载img时，LoremPixel都会提供一个新的随机图像。“爆炸”效果似乎（这很有趣）会在执行操作之前重新加载图像的副本。@JustinMorgan是的，我不太担心，它只是一个占位符图像。无论是什么图像，问题都是一样的。所以我可以将其更改为附加到el.parent（）？这样，如果需要，我仍然可以将其用于其他元素？@SamT
。appendTo（）
使用选择器。因此，为了使其更具通用性，可以执行以下操作：
$（this）.parent（）
。这将附加到分解元素的父元素。通过传递适当的选择器，可以附加到要添加的任何元素。对上一个示例的修改通过传递
.appendTo（$（this）.parents（'.outer'）.next（））
分解父div的下一个同级中的内容来演示这一点。第一个是你问的问题。第二个纯粹是为了演示目的。@SamT是的，应该可以。但是我可能会改用
.insertAfter（el）
。@SamT使用
数据动画容器
属性定义选择器。如果省略了该属性，它将回退到使用
document.body
来代替。忽略前面的注释，我成功地对其进行了排序。