如何在周围的div中保持jQuery UI"爆炸".effect()？

Question

我正在创建一个图像滑块,我希望将爆炸效果作为过渡.但问题是,当它发射时,爆炸会超出周围的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:隐藏,以便它不会覆盖其他页面元素.我尝试了这个,但它没有真正起作用:

http://jsfiddle.net/SJFpF/1/

我将不得不创建自己的,或者可以这样做,但我只是在密集？

Answer 1

问题是爆炸效果会产生许多弹片元素,然后将其附加到body.我发现覆盖这些元素的容器的唯一方法是更改​​动画的实际代码,以便它在动画元素之后附加这些元素.

来自源代码的片段:

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

请参阅jsFiddle上的测试用例