CSS

Friday, February 28, 2014

JQuery .slideDown(), .slideUp() dan .slideToggle()

Hallo (Masih Ketemu lagi dengan Saya)Dengan Thread yang BerbedaXd Tentunya :p,(BELAJAR JQUERY)Oke Kita Saling Belajar tentang Jquery.

Disini Kita Saling Belajar, Tidak Ada Master"ran (Kaya Pesulap)XD Sebenarnya si Jquery itu gak susah" Amat sii, Baca Perlahan" Agar Mudah Mengerti Oke?
udah, okeh aja,, daripada gak dibagi tar lhoo :P

.slideDown() digunakan untuk mengubah objek yang tersembunyi menjadi muncul dengan menciptakan efek sliding membuka.
.slideUp() digunakan untuk menyembunyikan objek dengan menciptakan efek sliding menutup.
.slideToggle() merupakan gabungan antara efek .slideDown() dan .slideUp(). Jadi, saat elemen sedang muncul, maka .slideToggle() bertugas untuk menyembunyikannya, sedangkan saat elemen sedang menghilang, maka .slideToggle() bertugas untuk menampilkannya.

Penulisan Secara umum


$(sasaran).slideDown(durasi); $(sasaran).slideUp(durasi); $(sasaran).slideToggle(durasi);

Sasaran: adalah objek yang akan dikenai perintah
Durasi: adalah kecepatan aksi. Nilainya bisa berupa milidetik (misal: 1500, 2000) atau 'slow', 'normal' dan 'fast'

Krangka

<button class="hilang">Tutup!</button>
<button class="muncul">Buka!</button>
<button class="bukatutup">Buka & Tutup</button>
<div id="target"></div>

Css


body {padding:30px;} #target { background:rgb(37, 42, 61); width:200px; height:200px; padding:5px; }>

Deklarasi JQuery

$('.hilang').click(function() {
    $('#target').slideUp('slow');
});
$('.muncul').click(function() {
    $('#target').slideDown('fast');
});
$('.bukatutup').click(function() {
    $('#target').slideToggle(1000);
});

0 comments:

handapeunpost