Membuat Form Slide Animate dan SlideDown Jquery UI

Halo teman-teman, apa kabar,,?? Semoga kalian selalu diberikan sehat dan bahagia ya. Pada artikel kemarin kita sudah membahas atau mempraktekkan beberapa fungsi dari Jquery, dan pada kesempatan yang baik ini kita akan Membuat Form Slide Animate dan SlideDown Jquery UI yang nanti nya kita akan membuat form daftar yang biasa nya ada pada sebelah kanan website. Tetapi kita buat sedikit lebih menarik dengan menggabungkan Animate dan SlideDown fungsi yang ada pada Jquery UI (user interface). Baik saya berikan screenshotnya yang nantinya akan kita buat

Kita langsung saja praktekkan, teman-teman siapkan code editornya. Copy script di bawah ini

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Animate dan SlideDown</title>
  <style>
  *{padding: 0; margin: 0}
  #content{color: #F13C00; background-color: #5edae9;font-size: 25px;padding: 20px;text-align: center;width: 600px;margin: auto;border-radius: 5px 5px 0 0;font-size: 50px;}
  #content1{height: 473px; background: #d8eff0; width: 640px; margin: auto; border-radius: 0 0 5px 5px;}
  table{width:500px; margin: auto; padding: 20px; font-size:24px; color:white; }
  th{background: #00509E; padding: 20px; font-size: 30px; border-radius: 5px}
  tr td{padding: 10px 0; color:brown;}
  input{padding: 10px; width: 400px;border-radius: 3px; border:1px solid white; font-size: 18px}
  input[type=submit]{background: #00509E;padding: 20px;width: 523px; border-radius: 5px; border:1px solid #00509E; color:white; font-size: 20px; display: block;}
  input[type=submit]:hover{background: orange; border:1px solid orange; display: block;}
  </style>
</head>
<body>
<div id="content">Klik untuk mendaftar</div>
<div id="content1">
  <table>
    <form action="" method="">
      <tr>
        <th colspan="3">Silahkan Mendaftar</th>
      </tr>
      <tr>
        <td>Nama</td>
        <td></td>
        <td><input type="text" name="" placeholder="Masukkan Nama"></td>
      </tr>
      <tr>
        <td>Email</td>
        <td></td>
        <td><input type="text" name="" placeholder="Email"></td>
      </tr>
      <tr>
        <td>No Telp</td>
        <td></td>
        <td><input type="text" name="" placeholder="Nomor Telepon"></td>
      </tr>
      <tr>
        <td>Password</td>
        <td></td>
        <td><input type="password" name="" placeholder="Password"></td>
      </tr>
      <tr>
        <td colspan="3"><input type="submit" name="" value="Daftar"></td>
      </tr>
    </form>
  </table>
</div>
</body>
</html>

Lalu paste di code editornya dan save dengan nama index.html, kemudian open to browse atau run. Output akan menghasilkan seperti gambar di bawah ini

Langkah berikutnya berikan display:none di dalam css #content1

Berfungsi untuk hidden form, jika sudah di tambahkan di save lalu refreas pada browsernya

Nah form sudah berhasil kita hidden, kemudian kita berikan fungsi Jquery nya. Jangan lupa berikan library Jquery dan Jquery UI di dalam tag <head>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Lalu tambahkan fungsi Jquery nya, temen-temen copy script dibawah ini

<script>
$( "#content" ).click(function() {
  $( "#content" ).animate({color: "rgb(255, 255, 255)",backgroundColor: "rgb(255, 191, 8)"},500,function(){
      $("#content1").slideDown("slow");
  });
});
</script>

Kemudian disave dan refreas pada browsernya, lalu teman-teman klik pada headernya. Maka setelah di klik akan melakukan perubahan background dan warna text berbeda yang di jalankan oleh Jquery UI (user interface). Setelah background berubah kemudian akan melakukan slideDown yang sebelumnya css #content1 kita berikan display:none dan selanjutnya akan dijalankan oleh fungsi slideDown() yang ada pada Jquery. Form sudah terlihat lebih menarik, Cukup mudah bukan…??!! Baik mungkin sekian dulu pada artikel kali ini tentang Membuat Form Slide Animate dan SlideDown Jquery UI semoga bisa menjadi tambahan ilmu Jquerynya. Silahkan teman-teman memodifikasinya sendiri ya, Oke terimakasih dan semoga bermanfaat. Sampai Jumpa di artikel berikutnya. 🙂

Membuat Form Slide Animate dan SlideDown Jquery UI

Kategori