Membuat Efek Pintu Geser Ke Bawah dengan JQuery

Seperti yang saya katakan pada posting sebelumnya,

bahwa tutorial ini terbagi dalam 4 (empat) efek per-

geseran gambar, yaitu ke arah kanan, kiri, bawah dan

ke arah atas. Untuk kesempatan kali ini kita akan

bahas pergeseran gambar yang ke arah bawah.

Sebagai contohnya, coba letakkan cursor anda tepat

berada di atas gambar yang terdapat di bawah ini :

TEKS BELAKANG DI SINI

Anda tertarik ingin membuat ? berikut adalah caranya :

1.  Rancangan -> Tambah Gadget ->
     Pilih HTML/JavaScript.

2.  Masukkan ke dalam kontennya
     kode yang tertera di bawah ini :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><br /> <script type="text/javascript"><br /> $(document).ready(function() {<br /> $('.box_container-down').hover(function(){<br /> var distance = $(this).outerHeight();<br /> $(this).find('.box_image').animate({ top : distance },{queue:false,duration:300});<br /> }, function(){<br /> $(this).find('.box_image').animate({ top : '0px' },{queue:false,duration:300});<br /> }); <br /> <br /> });<br /> </script><br /> <br /> <style><br /> .box_container-down{position:relative; width:300px; overflow:hidden; height:220px; background: lime; color: black;}<br /> .box_image { position:absolute; }<br /> .box_info { margin:10px; font-family: 'Georgia'; font-weight: bold; }<br /> <br /> </style><br /> <br /> <br /> <div class='box_container-down'><br /> <img class='box_image' src='URL Gambar di sini' style='width:300px'/><br /> <p>TEKS BELAKANG DI SINI</p><br /> </div>

KETERANGAN =

Ganti gambarnya dengan gambar miliki anda,
letakkan pada kode URL Gambar di sini

Sesuaikan ukuran width: & height: nya
dengan gambar milik anda tersebut.

Masukkan kalimat atau tulisan anda yang
akan menjadi latar belakangnya
pada kode TEKS BELAKANG DI SINI

Sesuaikan juga warna background dan warna
tulisannya pada kode background: & color:

Selamat mencoba, good luck!