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
Mulailah
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
Metode
$( "#clickme" ).click(function() {
$( "#book" ).slideDown( "slow", function() {
// Animation complete.
});
});
1 menganimasikan ketinggian elemen yang cocok. Hal ini menyebabkan bagian bawah halaman meluncur ke bawah, memberi jalan bagi item yang terungkapDurasi diberikan dalam milidetik; . String
$( "#clickme" ).click(function() {
$( "#book" ).slideDown( "slow", function() {
// Animation complete.
});
});
2 dan$( "#clickme" ).click(function() {
$( "#book" ).slideDown( "slow", function() {
// Animation complete.
});
});
3 dapat diberikan untuk menunjukkan durasi masing-masing$( "#clickme" ).click(function() {
$( "#book" ).slideDown( "slow", function() {
// Animation complete.
});
});
4 dan$( "#clickme" ).click(function() {
$( "#book" ).slideDown( "slow", function() {
// Animation complete.
});
});
5 milidetik. Jika ada string lain yang diberikan, atau jika parameter$( "#clickme" ).click(function() {
$( "#book" ).slideDown( "slow", function() {
// Animation complete.
});
});
6 dihilangkan, durasi default 400 milidetik digunakanKami 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">
_Dengan elemen yang awalnya tersembunyi, kita dapat menampilkannya secara perlahan
1
2
3
4
5
$( "#clickme" ).click(function() {
$( "#book" ).slideDown( "slow", function() {
// Animation complete.
});
});
$( "#clickme" ).click(function() {
$( "#book" ).slideDown( "slow", function() {
// Animation complete.
});
});
8Melonggarkan
Pada 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>slideDown demo</title>
<style>
div {
background: #de9a44;
margin: 3px;
width: 80px;
height: 40px;
display: none;
float: left;
}
</style>
<script src="//code.jquery.com/jquery-3.6.3.js"></script>
</head>
<body>
Click me!
<div></div>
<div></div>
<div></div>
<script>
$( document.body ).click(function () {
if ( $( "div" ).first().is( ":hidden" ) ) {
$( "div" ).slideDown( "slow" );
} else {
$( "div" ).hide();
}
});
</script>
</body>
</html>
0. Lebih banyak fungsi pelonggaran tersedia dengan penggunaan plug-in, terutama jQuery UI suiteFungsi Panggilan Balik
Jika 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>slideDown demo</title>
<style>
div {
background: #de9a44;
margin: 3px;
width: 80px;
height: 40px;
display: none;
float: left;
}
</style>
<script src="//code.jquery.com/jquery-3.6.3.js"></script>
</head>
<body>
Click me!
<div></div>
<div></div>
<div></div>
<script>
$( document.body ).click(function () {
if ( $( "div" ).first().is( ":hidden" ) ) {
$( "div" ).slideDown( "slow" );
} else {
$( "div" ).hide();
}
});
</script>
</body>
</html>
1 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 keseluruhanPada jQuery 1. 6, metode
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slideDown demo</title>
<style>
div {
background: #de9a44;
margin: 3px;
width: 80px;
height: 40px;
display: none;
float: left;
}
</style>
<script src="//code.jquery.com/jquery-3.6.3.js"></script>
</head>
<body>
Click me!
<div></div>
<div></div>
<div></div>
<script>
$( document.body ).click(function () {
if ( $( "div" ).first().is( ":hidden" ) ) {
$( "div" ).slideDown( "slow" );
} else {
$( "div" ).hide();
}
});
</script>
</body>
</html>
2 dapat digunakan bersamaan dengan metode<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slideDown demo</title>
<style>
div {
background: #de9a44;
margin: 3px;
width: 80px;
height: 40px;
display: none;
float: left;
}
</style>
<script src="//code.jquery.com/jquery-3.6.3.js"></script>
</head>
<body>
Click me!
<div></div>
<div></div>
<div></div>
<script>
$( document.body ).click(function () {
if ( $( "div" ).first().is( ":hidden" ) ) {
$( "div" ).slideDown( "slow" );
} else {
$( "div" ).hide();
}
});
</script>
</body>
</html>
3 untuk mengeksekusi satu panggilan balik untuk animasi secara keseluruhan ketika semua elemen yang cocok telah menyelesaikan animasinya ( Lihat )catatan tambahan
- Semua efek jQuery, termasuk
$( "#clickme" ).click(function() {
$( "#book" ).slideDown( "slow", function() {
// Animation complete.
});
});
_1, dapat dimatikan secara global dengan menyetel<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slideDown demo</title>
<style>
div {
background: #de9a44;
margin: 3px;
width: 80px;
height: 40px;
display: none;
float: left;
}
</style>
<script src="//code.jquery.com/jquery-3.6.3.js"></script>
</head>
<body>
Click me!
<div></div>
<div></div>
<div></div>
<script>
$( document.body ).click(function () {
if ( $( "div" ).first().is( ":hidden" ) ) {
$( "div" ).slideDown( "slow" );
} else {
$( "div" ).hide();
}
});
</script>
</body>
</html>
5, yang secara efektif menyetel durasi ke 0. Untuk informasi lebih lanjut, lihat jQuery. fx. mati - Jika
$( "#clickme" ).click(function() {
$( "#book" ).slideDown( "slow", function() {
// Animation complete.
});
});
1 dipanggil pada daftar tidak berurutan (<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slideDown demo</title>
<style>
div {
background: #de9a44;
margin: 3px;
width: 80px;
height: 40px;
display: none;
float: left;
}
</style>
<script src="//code.jquery.com/jquery-3.6.3.js"></script>
</head>
<body>
Click me!
<div></div>
<div></div>
<div></div>
<script>
$( document.body ).click(function () {
if ( $( "div" ).first().is( ":hidden" ) ) {
$( "div" ).slideDown( "slow" );
} else {
$( "div" ).hide();
}
});
</script>
</body>
</html>
7) dan elemen<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slideDown demo</title>
<style>
div {
background: #de9a44;
margin: 3px;
width: 80px;
height: 40px;
display: none;
float: left;
}
</style>
<script src="//code.jquery.com/jquery-3.6.3.js"></script>
</head>
<body>
Click me!
<div></div>
<div></div>
<div></div>
<script>
$( document.body ).click(function () {
if ( $( "div" ).first().is( ":hidden" ) ) {
$( "div" ).slideDown( "slow" );
} else {
$( "div" ).hide();
}
});
</script>
</body>
</html>
8 memiliki posisi (relatif, absolut, atau tetap), efeknya mungkin tidak berfungsi dengan baik di IE6 hingga setidaknya IE9 kecuali<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slideDown demo</title>
<style>
div {
background: #de9a44;
margin: 3px;
width: 80px;
height: 40px;
display: none;
float: left;
}
</style>
<script src="//code.jquery.com/jquery-3.6.3.js"></script>
</head>
<body>
Click me!
<div></div>
<div></div>
<div></div>
<script>
$( document.body ).click(function () {
if ( $( "div" ).first().is( ":hidden" ) ) {
$( "div" ).slideDown( "slow" );
} else {
$( "div" ).hide();
}
});
</script>
</body>
</html>
7 memiliki "tata letak. " Untuk memperbaiki masalah, tambahkan<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slideDown demo</title>
<style>
div {
background: #cfd;
margin: 3px;
width: 50px;
text-align: center;
float: left;
cursor: pointer;
border: 2px outset black;
font-weight: bolder;
}
input {
display: none;
width: 120px;
float: left;
margin: 10px;
}
</style>
<script src="//code.jquery.com/jquery-3.6.3.js"></script>
</head>
<body>
<div>Push!</div>
<input type="text">
<input type="text" class="middle">
<input type="text">
<script>
$( "div" ).click(function() {
$( this ).css({
borderStyle: "inset",
cursor: "wait"
});
$( "input" ).slideDown( 1000, function() {
$( this )
.css( "border", "2px red inset" )
.filter( ".middle" )
.css( "background", "yellow" )
.focus();
$( "div" ).css( "visibility", "hidden" );
});
});
</script>
</body>
</html>
0 dan<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slideDown demo</title>
<style>
div {
background: #cfd;
margin: 3px;
width: 50px;
text-align: center;
float: left;
cursor: pointer;
border: 2px outset black;
font-weight: bolder;
}
input {
display: none;
width: 120px;
float: left;
margin: 10px;
}
</style>
<script src="//code.jquery.com/jquery-3.6.3.js"></script>
</head>
<body>
<div>Push!</div>
<input type="text">
<input type="text" class="middle">
<input type="text">
<script>
$( "div" ).click(function() {
$( this ).css({
borderStyle: "inset",
cursor: "wait"
});
$( "input" ).slideDown( 1000, function() {
$( this )
.css( "border", "2px red inset" )
.filter( ".middle" )
.css( "background", "yellow" )
.focus();
$( "div" ).css( "visibility", "hidden" );
});
});
</script>
</body>
</html>
1 deklarasi CSS ke<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slideDown demo</title>
<style>
div {
background: #cfd;
margin: 3px;
width: 50px;
text-align: center;
float: left;
cursor: pointer;
border: 2px outset black;
font-weight: bolder;
}
input {
display: none;
width: 120px;
float: left;
margin: 10px;
}
</style>
<script src="//code.jquery.com/jquery-3.6.3.js"></script>
</head>
<body>
<div>Push!</div>
<input type="text">
<input type="text" class="middle">
<input type="text">
<script>
$( "div" ).click(function() {
$( this ).css({
borderStyle: "inset",
cursor: "wait"
});
$( "input" ).slideDown( 1000, function() {
$( this )
.css( "border", "2px red inset" )
.filter( ".middle" )
.css( "background", "yellow" )
.focus();
$( "div" ).css( "visibility", "hidden" );
});
});
</script>
</body>
</html>
2
Contoh
Menganimasikan semua div untuk meluncur ke bawah dan menampilkan dirinya sendiri selama lebih dari 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
28
29
30
31
32
33
34
35
36
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slideDown demo</title>
<style>
div {
background: #de9a44;
margin: 3px;
width: 80px;
height: 40px;
display: none;
float: left;
}
</style>
<script src="//code.jquery.com/jquery-3.6.3.js"></script>
</head>
<body>
Click me!
<div></div>
<div></div>
<div></div>
<script>
$( document.body ).click(function () {
if ( $( "div" ).first().is( ":hidden" ) ) {
$( "div" ).slideDown( "slow" );
} else {
$( "div" ).hide();
}
});
</script>
</body>
</html>
_Demo
Menganimasikan semua input untuk meluncur ke bawah, menyelesaikan animasi dalam 1000 milidetik. Setelah animasi selesai, tampilan input diubah terutama jika input tengahlah yang mendapatkan fokus