Boolean yang menunjukkan apakah akan menempatkan animasi dalam antrean efek. Jika salah, animasi akan segera dimulai. Pada jQuery 1. 7, opsi antrean juga dapat menerima string, dalam hal ini animasi ditambahkan ke antrean yang diwakili oleh string tersebut. Saat nama antrean khusus digunakan, animasi tidak dimulai secara otomatis;
specialEasing
Jenis.
Objek yang berisi satu atau lebih properti CSS yang ditentukan oleh argumen properti dan fungsi easing terkaitnya. (versi ditambahkan. 1. 4)
melangkah
Jenis. (sekarang, dua belas)
Fungsi yang akan dipanggil untuk setiap properti animasi dari setiap elemen animasi. Fungsi ini memberikan kesempatan untuk memodifikasi objek Tween untuk mengubah nilai properti sebelum disetel
kemajuan
Jenis. (animasi, progres, sisaMs)
Fungsi yang akan dipanggil setelah setiap langkah animasi, hanya sekali per elemen animasi terlepas dari jumlah properti animasi. (versi ditambahkan. 1. 8)
menyelesaikan
Jenis. ()
Fungsi yang dipanggil setelah animasi pada elemen selesai
awal
Jenis. (animasi)
Fungsi yang akan dipanggil saat animasi pada elemen dimulai. (versi ditambahkan. 1. 8)
Selesai
Jenis. (animasi, jumpToEnd)
Fungsi yang akan dipanggil saat animasi pada elemen selesai (objek Promise-nya diselesaikan). (versi ditambahkan. 1. 8)
gagal
Jenis. (animasi, jumpToEnd)
Fungsi yang akan dipanggil saat animasi pada elemen gagal diselesaikan (objek Promise-nya ditolak). (versi ditambahkan. 1. 8)
selalu
Jenis. (animasi, jumpToEnd)
Fungsi yang akan dipanggil saat animasi pada elemen selesai atau berhenti tanpa selesai (objek Promise-nya diselesaikan atau ditolak). (versi ditambahkan. 1. 8)
versi ditambahkan. 1. 4. 3
durasi (default. 400)
Jenis. atau
String atau angka yang menentukan berapa lama animasi akan berjalan
pelonggaran (default. swing)
Jenis.
String yang menunjukkan fungsi easing mana yang akan digunakan untuk transisi
menyelesaikan
Jenis. ()
Fungsi untuk memanggil setelah animasi selesai, dipanggil sekali per elemen yang cocok
Tanpa parameter, metode
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123">
_4 adalah cara termudah untuk menyembunyikan elemen1
$( ".target" ).hide();
Elemen yang cocok akan segera disembunyikan, tanpa animasi. Ini kira-kira sama dengan memanggil
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123">
5, kecuali bahwa nilai properti<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123">
6 disimpan dalam cache data jQuery sehingga<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123">
6 nantinya dapat dikembalikan ke nilai awalnya. Jika suatu elemen memiliki<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123">
_6 nilai<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123">
9 dan disembunyikan kemudian ditampilkan, itu akan ditampilkan sekali lagi<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123">
9Saat durasi, objek biasa, atau fungsi "lengkap" disediakan,
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123">
4 menjadi metode animasi. Metode<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123">
4 menganimasikan lebar, tinggi, dan opasitas elemen yang cocok secara bersamaan. Saat properti ini mencapai 0, properti gaya<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123">
_6 disetel ke// With the element initially shown, we can hide it slowly:
$( "#clickme" ).click(function() {
$( "#book" ).hide( "slow", function() {
alert( "Animation complete." );
});
});
4 untuk memastikan bahwa elemen tidak lagi memengaruhi tata letak halamanDurasi diberikan dalam milidetik; . String
// With the element initially shown, we can hide it slowly:
$( "#clickme" ).click(function() {
$( "#book" ).hide( "slow", function() {
alert( "Animation complete." );
});
});
5 dan// With the element initially shown, we can hide it slowly:
$( "#clickme" ).click(function() {
$( "#book" ).hide( "slow", function() {
alert( "Animation complete." );
});
});
6 dapat diberikan untuk menunjukkan durasi masing-masing// With the element initially shown, we can hide it slowly:
$( "#clickme" ).click(function() {
$( "#book" ).hide( "slow", function() {
alert( "Animation complete." );
});
});
7 dan// With the element initially shown, we can hide it slowly:
$( "#clickme" ).click(function() {
$( "#book" ).hide( "slow", function() {
alert( "Animation complete." );
});
});
8 milidetikPerhatikan bahwa
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123">
_4 segera diaktifkan dan akan menggantikan antrean animasi jika tidak ada durasi atau durasi 0 yang ditentukanPada jQuery 1. 4. 3, string opsional yang menamai fungsi pelonggaran dapat digunakan. Fungsi easing menentukan kecepatan perkembangan animasi di berbagai titik dalam animasi. Satu-satunya implementasi easing di library jQuery adalah default, disebut swing, dan yang berkembang dengan kecepatan konstan, disebut
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hide demo</title>
<script src="//code.jquery.com/jquery-3.6.3.js"></script>
</head>
<body>
<p>Hello</p>
<a href="#">Click to hide me too</a>
<p>Here is another paragraph</p>
<script>
$( "p" ).hide();
$( "a" ).click(function( event ) {
event.preventDefault();
$( this ).hide();
});
</script>
</body>
</html>
1. Lebih banyak fungsi pelonggaran tersedia dengan penggunaan plug-in, terutama jQuery UI suiteJika disediakan, panggilan balik diaktifkan setelah animasi selesai. Ini dapat berguna untuk merangkai animasi yang berbeda secara berurutan. Callback tidak mengirimkan argumen apa pun, tetapi
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hide demo</title>
<script src="//code.jquery.com/jquery-3.6.3.js"></script>
</head>
<body>
<p>Hello</p>
<a href="#">Click to hide me too</a>
<p>Here is another paragraph</p>
<script>
$( "p" ).hide();
$( "a" ).click(function( event ) {
event.preventDefault();
$( this ).hide();
});
</script>
</body>
</html>
2 disetel ke elemen DOM yang dianimasikan. Jika beberapa elemen dianimasikan, penting untuk diperhatikan bahwa callback dijalankan sekali per elemen yang cocok, bukan sekali untuk animasi secara keseluruhanCatatan. Metode ini dapat menyebabkan masalah kinerja, terutama bila digunakan pada banyak elemen. Jika Anda mengalami masalah seperti itu, gunakan alat pengujian kinerja untuk menentukan apakah metode ini penyebabnya. Selain itu, metode ini dapat menyebabkan masalah dengan tata letak responsif jika nilai tampilan berbeda pada ukuran area pandang yang berbeda
Kami dapat menganimasikan elemen apa pun, seperti gambar sederhana
1
2
3
4
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123">
1
2
3
4
5
6
// With the element initially shown, we can hide it slowly:
$( "#clickme" ).click(function() {
$( "#book" ).hide( "slow", function() {
alert( "Animation complete." );
});
});
Gambar 1 - Ilustrasi efek<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hide demo</title>
<script src="//code.jquery.com/jquery-3.6.3.js"></script>
</head>
<body>
<p>Hello</p>
<a href="#">Click to hide me too</a>
<p>Here is another paragraph</p>
<script>
$( "p" ).hide();
$( "a" ).click(function( event ) {
event.preventDefault();
$( this ).hide();
});
</script>
</body>
</html>
3catatan tambahan
- Semua efek jQuery, termasuk
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123">
_4, dapat dimatikan secara global dengan menyetel<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hide demo</title>
<script src="//code.jquery.com/jquery-3.6.3.js"></script>
</head>
<body>
<p>Hello</p>
<a href="#">Click to hide me too</a>
<p>Here is another paragraph</p>
<script>
$( "p" ).hide();
$( "a" ).click(function( event ) {
event.preventDefault();
$( this ).hide();
});
</script>
</body>
</html>
5, yang secara efektif menyetel durasi ke 0. Untuk informasi lebih lanjut, lihat jQuery. fx. mati
Contoh
Sembunyikan semua paragraf lalu tautan di klik
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hide demo</title>
<script src="//code.jquery.com/jquery-3.6.3.js"></script>
</head>
<body>
<p>Hello</p>
<a href="#">Click to hide me too</a>
<p>Here is another paragraph</p>
<script>
$( "p" ).hide();
$( "a" ).click(function( event ) {
event.preventDefault();
$( this ).hide();
});
</script>
</body>
</html>
Demo
Menganimasikan semua paragraf yang ditampilkan untuk disembunyikan secara perlahan, menyelesaikan animasi dalam 600 milidetik
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hide demo</title>
<style>
p {
background: #dad;
font-weight: bold;
}
</style>
<script src="//code.jquery.com/jquery-3.6.3.js"></script>
</head>
<body>
<button>Hide 'em</button>
<p>Hiya</p>
<p>Such interesting text, eh?</p>
<script>
$( "button" ).click(function() {
$( "p" ).hide( "slow" );
});
</script>
</body>
</html>
Demo
Menganimasikan semua rentang (kata-kata dalam kasus ini) untuk disembunyikan dengan cepat, menyelesaikan setiap animasi dalam 200 milidetik. Setelah setiap animasi selesai, animasi berikutnya akan dimulai
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hide demo</title>
<style>
span {
background: #def3ca;
padding: 3px;
float: left;
}
</style>
<script src="//code.jquery.com/jquery-3.6.3.js"></script>
</head>
<body>
<button id="hider">Hide</button>
<button id="shower">Show</button>
<div>
<span>Once</span> <span>upon</span> <span>a</span>
<span>time</span> <span>there</span> <span>were</span>
<span>three</span> <span>programmers...</span>
</div>
<script>
$( "#hider" ).click(function() {
$( "span:last-child" ).hide( "fast", function() {
// Use arguments.callee so we don't need a named function
$( this ).prev().hide( "fast", arguments.callee );
});
});
$( "#shower" ).click(function() {
$( "span" ).show( 2000 );
});
</script>
</body>
</html>
Demo
Menyembunyikan div saat diklik selama 2 detik, lalu menghapus elemen div saat disembunyikan. Coba klik lebih dari satu kotak sekaligus