3

画像スライダーを作成していますが、トランジションとして爆発効果が欲しいです。しかし問題は、爆発が発火したときに周囲の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/

自分で作成する必要がありますか、それともできますか?

4

2 に答える 2

7

問題は、爆発効果が多数の破片要素を作成し、それらを に追加すること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 のテスト ケースを参照してください

于 2013-06-18T16:56:11.973 に答える