Tampilan transisi css geser ke bawah

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 terungkap

    Durasi 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 digunakan

    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">

    _

    Dengan elemen yang awalnya tersembunyi, kita dapat menampilkannya secara perlahan

    1

    2

    3

    4

    5

    $( "#clickme" ).click(function() {

    $( "#book" ).slideDown( "slow", function() {

    // Animation complete.

    });

    });

    Tampilan transisi css geser ke bawah
    Tampilan transisi css geser ke bawah
    Tampilan transisi css geser ke bawah
    Tampilan transisi css geser ke bawah
    Gambar 1 - Ilustrasi efek

    $( "#clickme" ).click(function() {

    $( "#book" ).slideDown( "slow", function() {

    // Animation complete.

    });

    });

    8

    Melonggarkan

    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="https://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 suite

    Fungsi 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="https://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 keseluruhan

    Pada 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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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

    Bisakah transisi CSS ditampilkan?

    tampilan bukanlah salah satu properti tempat transisi berfungsi . Lihat properti CSS yang dapat dianimasikan untuk daftar properti CSS yang dapat menerapkan transisi padanya.

    Apakah properti tampilan dapat dianimasikan?

    Seperti yang mungkin sudah Anda ketahui, transisi dan animasi CSS memungkinkan Anda menganimasikan sekumpulan properti CSS tertentu. Salah satu properti yang tidak bisa dianimasikan adalah properti display .