jquery - 如何将 jQuery UI "explode".effect() 保留在周围的 div 中？

Question

我正在创建一个图像 slider ，我希望将爆炸效果作为过渡效果。但问题是，explode 在触发时会超出周围的 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>

我想要的是一种带有 overflow:hidden 的周围 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
    })

参见 test case on jsFiddle