Explode effect jquery not working

Question

I have a banner which need to be appear by explode effect in 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); 
    });
});

however, the effect is not working but lagging before it appear. Why is it happened? am i doing anything wrong in the code?

Answer 1

Try this out:- 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); 
    });