Efek jQuery

  • Halaman Sebelumnya
  • Halaman Berikutnya

jQuery dapat membuat efek yang menyembunyikan, menampilkan, berubah, geser, dan animasi khusus lainnya.

Coba Sendiri

Coba efek jQuery ini:

CodeW3C.com - Situs Tutorial Teknologi Web Terdepan

Di CodeW3C.com, Anda dapat menemukan semua tutorial konstruksi situs yang Anda butuhkan.

Klik disini

Contoh

jQuery hide()
Demos fungsi jQuery hide() sederhana.
jQuery hide()
Demos hide() lainnya. Bagaimana untuk menyembunyikan bagian teks.
jQuery slideToggle()
Demos efek panel slide sederhana.
jQuery fadeTo()
Demos fungsi jQuery fadeTo() sederhana.
jQuery animate()
Demos fungsi jQuery animate() sederhana.

Pindah dan sembunyikan jQuery

Dengan fungsi hide() dan show(), jQuery mendukung pengembalian dan penghilangan elemen HTML:

Contoh

$("#sembunyikan").klik(function(){
$("p").sembunyikan();
});
$("#tampilkan").klik(function(){
$("p").tampilkan();
});

Coba Sendiri

hide() dan show() dapat disetel dengan 2 parameter pilihan: speed dan callback.

Syarat:

$(selector).sembunyikan(cepat,kembalikan)
$(selector).tampilkan(cepat,kembalikan)

speed Parameter menentukan kecepatan penampakan atau penghilangan. Dapat diatur seperti ini: "slow", "fast", "normal" atau dalam milidetik.

callback Parameter adalah nama fungsi yang dieksekusi setelah fungsi hide atau show selesai. Anda akan belajar lebih banyak tentang callback 参数的知识。

Contoh

$("button").click(function(){
$("p").sembunyikan(1000);
});

Coba Sendiri

Pindah jQuery

Fungsi toggle() jQuery menggunakan fungsi show() atau hide() untuk mengganti keadaan kenampakan elemen HTML.

Sembunyikan elemen yang terlihat, dan tampilkan elemen yang disembunyikan.

Syarat:

$(selector).toggle(cepat,kembalikan)

speed 参数可以设置这些值："slow", "fast", "normal" 或 毫秒。

Contoh

$("button").click(function(){
$("p").toggle();
});

Coba Sendiri

callback 参数是在该函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。

Fungsi gerakan jQuery - munculTurun, turunTurun, munculTurunToggle

jQuery memiliki fungsi gerakan berikut:

$(selector).turunTurun(cepat,kembalikan)
$(selector).munculTurun(cepat,kembalikan)
$(selector).slideToggle(speed,callback)

speed 参数可以设置这些值："slow", "fast", "normal" 或毫秒。

callback 参数是在该函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。

slideDown() 实例

$(".flip").click(function(){
$(".panel").slideDown();
});

Coba Sendiri

slideUp() 实例

$(".flip").click(function(){
$(".panel").slideUp()
})

Coba Sendiri

slideToggle() 实例

$(".flip").click(function(){
$(".panel").slideToggle();
});

Coba Sendiri

jQuery Fade 函数 - fadeIn(), fadeOut(), fadeTo()

jQuery 拥有以下 fade 函数：

$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeTo(speed,opacity,callback)

speed 参数可以设置这些值："slow", "fast", "normal" 或 毫秒。

fadeTo() 函数中的 opacity 参数规定减弱到给定的不透明度。

callback 参数是在该函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。

fadeTo() 实例

$("button").click(function(){
$("div").fadeTo("slow",0.25);
});

Coba Sendiri

fadeOut() 实例

$("button").click(function(){
$("div").fadeOut(4000);
});

Coba Sendiri

jQuery 自定义动画

jQuery 函数创建自定义动画的语法：

$(selector).animate({params},[duration],[easing],[callback])

关键的参数是 params。它定义产生动画的 CSS 属性。可以同时设置多个此类属性：

$(selector).animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});

第二个参数是 duration。它定义应用动画的时间。它设置的值是："slow", "fast", "normal" 或毫秒。

Contoh 1

<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
});
</script>

Coba Sendiri

Contoh 2

<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({left:"100px"},"slow");
$("#box").animate({fontSize:"3em"},"slow");
});
});
</script>

Coba Sendiri

Elemen HTML secara default adalah pengaturan statis dan tidak dapat bergerak.

Untuk membuat elemen dapat bergerak, atur CSS position menjadi relative atau absolute.

jQuery Efect - Dari Halaman Ini

Fungsi Deskripsi
$(selector).hide() Membuat elemen yang dipilih tersembunyi
$(selector).show() Membuat elemen yang dipilih terlihat
$(selector).toggle() Mengganti elemen yang dipilih (antara tersembunyi dan terlihat)
$(selector).slideDown() Membuat elemen yang dipilih bergerak ke bawah (terlihat)
$(selector).slideUp() Membuat elemen yang dipilih bergerak ke atas (tersembunyi)
$(selector).slideToggle() Mengganti elemen yang dipilih untuk bergerak ke atas dan ke bawah
$(selector).fadeIn() Membuat elemen yang dipilih masuk
$(selector).fadeOut() Membuat elemen yang dipilih halus
$(selector).fadeTo() Membuat elemen yang dipilih halus menjadi kecerahan yang diberikan
$(selector).animate() Melakukan animasi khusus bagi elemen yang dipilih

Untuk referensi penuh, kunjungi Panduan Referensi jQuery Effect。

  • Halaman Sebelumnya
  • Halaman Berikutnya