Efek gambar pecah dengan jquery II

1. Cara membuatnya : Login blogger
2. Rancangan, Edit Html, Cari kode :]]></b:skin>
3. Dan Simpan kode berikut diatasnya :

.box_container2{
    position:relative; /* important */
    width:420px; /* we must set a specific width of the container, so it doesn't strech when the image starts moving */
    height:auto; /* important */
    overflow:hidden; /* hide the content that goes out of the div */
    /*just styling bellow*/
    background: black;
    color:white;
    }
    .images_holder2{
    position:absolute; /* this is important, so the div is positioned on top of the text */
    }
    .image_div2 {
        position:relative; /* important so we can work with the left or right indent */
        overflow:hidden; /* hide the content outside the div (this is how we will hide the part of the image) */
        width:50%; /* make it 50% of the whole images_holder */
        float:left; /* make then inline */
    }
    .left2 img{}
    .right2 img{
        margin-left: -100%; /* 100% is in this case 50% of the image, so this is how we show the second part of the image */
    }

4. Simpan kode berikut diatas kode </head> :

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script type='text/javascript' src='http://kangdadang.googlecode.com/files/jquery.easing.1.3panning.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
        //FOR EASING EFFECT - NOT NEEDED
        $('.box_container2').hover(function(){
         
            var width = $(this).outerWidth() / 2;
         
            $(this).find('.left2').animate({ right : width },{easing: 'easeOutBounce', queue:false,duration:1000});
            $(this).find('.right2').animate({ left : width },{easing: 'easeOutBounce', queue:false,duration:1000});
        }, function(){
         
            $(this).find('.left2').animate({ right : 0 },{easing: 'easeOutBounce',queue:false,duration:1000});
            $(this).find('.right2').animate({ left : 0 },{easing: 'easeOutBounce',queue:false,duration:1000});
         
        });
          
  });
</script> 
5. Simpan template
6. Pemanggilannya Pada Html :


<div class="box_container2">
<div class="images_holder2">
<div class="image_div2 left2">
<img class="box_image" src="Kode Gambar Di sini" style="width: 420px;" /></div>
<div class="image_div2 right2">
<img class="box_image2" src="Kode Gambar Di sini" style="width: 420px;" /></div>
</div>
<img class="box_image2" src="Kode Gambar Di sini" style="width: 420px;" /></div>

7.SeLesai Dan Lihat Hasilnya Semoga Berhasil