Jquery

jQuery Efek : Efek Sliding – Kode dan Contohnya

Efek sliding merupakan metode slide jQuery menggeser elemen ke atas dan ke bawah.

Metode Sliding jQuery

Dengan jQuery kita bisa membuat efek geser pada elemen.

jQuery memiliki metode slide berikut:

  • slideDown()
  • slideUp ()
  • slideToggle ()

jQuery slideDown () Metode

Metode jQuery slideDown() digunakan untuk menggeser elemen.

Sintaks:

$(selector).slideDown(speed,callback);

Parameter kecepatan opsional menentukan durasi efek. Ini dapat mengambil nilai berikut: “lambat”, “cepat”, atau milidetik.

Parameter callback opsional adalah fungsi yang akan dijalankan setelah proses geser selesai.

Contoh berikut menunjukkan metode slideDown():

Contoh :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown("slow");
  });
});
</script>
<style> 
#panel, #flip {
  padding: 5px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#panel {
  padding: 50px;
  display: none;
}
</style>
</head>
<body>
 
<div id = "flip"> Klik untuk menggeser panel ke bawah </div>
<div id = "panel"> Hello World! </div>

</body>
</html>

Metode jQuery slideUp()

Metode jQuery slideUp() digunakan untuk menggeser elemen.

Sintaksis:

$(selector).slideUp(speed,callback);

Parameter kecepatan opsional menentukan durasi efek. Ini dapat mengambil nilai berikut: “lambat”, “cepat”, atau milidetik.

Parameter callback opsional adalah fungsi yang akan dijalankan setelah proses geser selesai.

Contoh berikut menunjukkan metode slideUp():

Contoh :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideUp("slow");
  });
});
</script>
<style> 
#panel, #flip {
  padding: 5px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#panel {
  padding: 50px;
}
</style>
</head>
<body>
 
<div id="flip">Klik untuk menggeser panel </div>
<div id="panel">Hello world!</div>

</body>
</html>

Metode jQuery slideToggle ()

Metode jQuery slideToggle() beralih antara metode slideDown() dan slideUp().

Jika elemen telah digeser ke bawah, slideToggle() akan menggesernya ke atas.

Jika elemen telah digeser ke atas, slideToggle() akan menggesernya ke bawah.

Parameter kecepatan opsional dapat mengambil nilai berikut: “lambat”, “cepat”, milidetik.

Parameter callback opsional adalah fungsi yang akan dijalankan setelah proses geser selesai.

Contoh berikut menunjukkan metode slideToggle():

Contoh :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});
</script>
<style> 
#panel, #flip {
  padding: 5px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#panel {
  padding: 50px;
  display: none;
}
</style>
</head>
<body>
 
<div id="flip">Klik untuk menggeser panel ke bawah atau ke atas </div>
<div id="panel">Hello world!</div>

</body>
</html>

Hanifah Nurbaeti

Share
Tags: Efek JQueryJQuery