Assalamualaikum Wr, Wb
Topiknya masih seputar jquery ya, Sedikit Pengantar
Jquery bisa dipakai untuk memberi efek visual. Contoh, untuk menggeser beberapa elemen bisa kesamping, keatas, kebawah untuk contoh kita akan menggeser elemen keatas. kodenya seperti dibawah ini:
Kode Menggeser elemen ke atas
$("#atas").slideUp("slow");
Kode Menggeser elemen ke bawah
$("#bawah").slideDown("slow");
Yok langsung saja kita prakter
Persiapan
- Buka Text editor untuk menulis Halaman Web
- Buat File index.html
File index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Belajar Jquery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function geserAtas(){
$("#pertama").slideUp("slow");
}
function geserBawah(){
$("#pertama").slideDown("slow");
}
</script>
</head>
<body>
<center>
<h1>Menggeser Elemen Paragraf keatas dan kebawah </h1>
<div>
<p id="pertama">Paragraf 1</p>
<p>Paragraf 2</p>
<p>Paragraf 3</p>
<p>Paragraf 4</p>
</div>
<p>Ini Paragraf 5</p>
<form>
<input type="button" value="Geser Keatas" onclick="geserAtas()">
<input type="button" value="Geser Kebawah" onclick="geserBawah()">
</form>
</center>
</body>
</html>
Simpan dan jalankan file index.html dibrowser temen temen klik tombol geserkeatas otomatis paragraf pertama akan hilang, dan untuk menampilkannya klik tombol geserkebawah. lebih jelasnya serperti gambar dibawah ini
Gambar ketika paragraf diklik geserkeatas
Gambar ketikaa paragraf diklik geserkebawah
Tidak ada komentar:
Tulis komentar