jquery - 爆発エフェクトjqueryが機能しない

Question

jqueryの爆発効果で表示する必要があるバナーがあります。

html:

<div class="banner">
<div class="click-for-more">Click For More!</div>
</div>
<div class="mosaic">
<div class="close-btn">X</div>
<img src="1280x1024(image).jpg">
</div>

jquery:

 $(document).ready(function(){
$(".click-for-more").click(function(e){
        e.preventDefault();
         $('.mosaic').show("explode", { pieces: 64 }, 2000);
    });

$(".close-btn").click(function(){
         $('.mosaic').hide("explode", { pieces: 64 }, 2000); 
    });
});

ただし、効果は機能しておらず、表示されるまでに時間がかかります。なぜそれが起こったのですか？私はコードで何か間違っていますか？

Answer 1

これを試してみてください： - http://jsfiddle.net/adiioo7/RvCS6/

JS:-

$(".click-for-more").click(function(e){
        e.preventDefault();
        $('.mosaic').show("explode", { pieces: 64 }, 2000);
    });

$(".close-btn").click(function(){
        $('.mosaic').hide("explode", { pieces: 64 }, 2000); 
    });