kesan jQuery

  • Halaman Sebelumnya
  • Halaman Berikutnya

jQuery boleh membuat kesan seperti menyembunyikan, menunjukkan, mengalihkan, gesi dan animasi khusus lainnya.

Coba Sendiri

Попробуйте этот эффект jQuery:

CodeW3C.com - ведущий сайт по веб-технологиям

На CodeW3C.com вы можете найти все необходимые вам руководства по созданию веб-сайтов.

Кликните здесь

Contoh

jQuery hide()
Демонстрация простого функции jQuery hide().
jQuery hide()
Ещё один демонстрация hide(). Как скрыть часть текста.
jQuery slideToggle()
Демонстрация простого эффекта слайд-панели.
jQuery fadeTo()
Демонстрация простого функции jQuery fadeTo().
jQuery animate()
Dемонстрация простого функции jQuery animate().

Penyembunyian dan penampilan jQuery

Dengan fungsi hide() dan show(), jQuery mendukung penghapusan dan penampilan elemen HTML:

Contoh

$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});

Coba Sendiri

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

Sintaks:

$(selector).hide(kecewa, kembali)
$(selector).show(kecewa, kembali)

speed Parameter menentukan kecewa untuk menampilkan atau menyembunyikan. Dapat diatur seperti ini: "slow", "fast", "normal" atau milisecond.

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

Contoh

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

Coba Sendiri

Pindah jQuery

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

Sembunyikan tampilan elemen, tampilkan elemen tersembunyi.

Sintaks:

$(selector).toggle(kecewa, kembali)

speed 参数可以设置这些值："慢", "快", "正常" 或 毫秒。

Contoh

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

Coba Sendiri

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

Fungsi geser jQuery - slideDown, slideUp, slideToggle

jQuery mempunyai fungsi geser berikut:

$(selector).slideDown(kecewa, kembali)
$(selector).slideUp(kecewa, kembali)
$(selector).slideToggle(speed,callback)

speed 参数可以设置这些值："慢", "快", "正常" 或毫秒。

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 参数可以设置这些值："慢", "快", "正常" 或 毫秒。

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 属性。可以同时设置多个此类属性：

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

第二个参数是 duration。它定义用来应用到动画的时间。它设置的值是："慢", "快", "正常" 或 毫秒。

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 baku adalah posisi statis, dan tidak dapat bergerak.

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

jQuery Effek - Dari Laman Ini

Fungsi Deskripsi
$(selector).hide() Sembunyikan elemen yang dipilih
$(selector).show() Tampilkan elemen yang dipilih
$(selector).toggle() Buka dan tutup (di antara sembunyi dan tampilkan) elemen yang dipilih
$(selector).slideDown() Geser ke bawah (tampilkan) elemen yang dipilih
$(selector).slideUp() Geser ke atas (sembunyikan) elemen yang dipilih
$(selector).slideToggle() Buka dan tutup gerakan geser ke atas dan ke bawah bagi elemen yang dipilih
$(selector).fadeIn() Halus masuk elemen yang dipilih
$(selector).fadeOut() Halus keluar elemen yang dipilih
$(selector).fadeTo() Buat elemen yang dipilih halus keluar ke kecerahan yang diberikan
$(selector).animate() Melaksanakan animasi khusus bagi elemen yang dipilih

Untuk panduan rujukan penuh, silakan kunjungi Panduan Rujukan jQuery Effect。

  • Halaman Sebelumnya
  • Halaman Berikutnya