#JQuery - #JQuery Dasar

Belajar JQuery Part 4 : Mengenal Effect Pada JQuery

Belajar JQuery Mengenal Effect Pada JQuery

Setelah pada tutorial sebelumnya anda telah mempelajari tentang pengenalan event pada jquery. klik di sini untuk membaca tutorial sebelumnya tentang pengenalan event pada jquery di www.malasngoding.com. pada tutorial belajar jquery mengenal effect pada jquery ini akan di jelaskan tentang pengenalan effect pada jquery. fungsi effect pada jquery merupakan fungsi-fungsi javascript yang sudah di rangkum menjadi fungsi jquery untuk memudahkan dalam penggunaanya.

penggunaan fungsi effect pada jquery sangat mudah di gunakan karena memliki syntax yang pendek dan mudah di mengerti. berikut adalah beberapa effect jquery:

hide()
function effect jquery untuk menyembunyikan element.
show()
function effect jquery untuk menampilkan element.
toggle()
function effect jquery untuk menampilkan dan menyembunyikan element.
fadeIn()
function effect jquery untuk menampilkan element dengan effect memudar.
fadeOut()
function effect jquery untuk menyembunyikan element dengan effect memudar.
fadeToggle()
function effect jquery untuk menampilkan dan menyembunyikan element dengan effect memudar.
slideDown()
function effect jquery untuk menampilkan element dengan effect slide.
slideUp()
function effect jquery untuk menyembunyikan element dengan effect slide.
slideToggle()
function effect jquery untuk menampilkan dan menyembunyikan element dengan effect slide.
animate()
function effect jquery untuk membuat effect animasi pada element.

dari penjelasan di atas pasti anda sudah mengetahui apa-apa saja function effect pada jquery. masing-masing function effect jquery tersebut sudah memiliki fungsi atau kegunaannya masing-masing. perhatikan contoh berikut ini untuk melihat cara penulisan dan penggunaan effect pada jquery.

Cara menggunakan dan membuat effect pada jquery

cara membuat effect dengan jquery sangat lah mudah karena jquery sudah merangkum fungsi-fungs effect kedalam beberapa fungsi effect yang bisa tinggal di gunakan seperti yang sudah di jelaskan di atas.

index.html

<!DOCTYPE html>

<html>

<head>

<title>Tutorial belajar JQuery Part 4 : Mengenal Effect Pada JQuery</title>

</head>

<body>

<h1>Efect pada JQuery | www.malasngoding.com</h1>

<button id="tombol">Tampilkan kotak</button>

<button id="tombol2">Sembunyikan kotak</button>

</body>

$(document).ready(function(){

$('#tombol').click(function(){

$('.box').show();

});

$('#tombol2').click(function(){

$('.box').hide();

});

</script>

</html>

style.css

body{

font-family: sans-serif;

}

h1{

text-align: center;

}

.box{

height: 300px;

width:300px;

background: orange;

display: none;

}

#tombol,

#tombol2{

padding:10px;

color: #fff;

background: #34495E;

border: none;

}

kemudian jalankan pada browser dan klik pada tombol tampilkan kotak untuk menampilkan element box, dan klik pada tombol sembunyikan kotak untuk menyembunyikan kotak.

$('#tombol').click(function(){

$('.box').show();

});

$('#tombol2').click(function(){

$('.box').hide();

});

pada contoh di atas tadi perhatikan untuk pemahaman tentang cara penulisan atau penggunaan effect jquery. terdapat dua buah tombol yang kita beri tanda dengan id tombol(#tombol) dan id tombol2 (#tombol2). kemudian memberikan event nya dengan event click. baca di sini untuk tutorial event jquery. kemudian saat element tombol di klik maka kita memberikan effect pada element yang kita inginkan.

1	$('.box').show();

effect di atas berarti menampilkan element box. dan

1	$('.box').hide();

effect di atas berarti untuk menyembunyikan element box.

belajar jquery mengenal effect pada jquery

See the Pen bEgrmW by Malas Ngoding (@malasngoding) on CodePen.0

Cara menggunakan effect toggle() pada jquery

Effect toggle() adalah effect jquery untuk menampilkan dan menyembunyikan element

index.html

<!DOCTYPE html>

<html>

<head>

<title>Tutorial belajar JQuery Part 4 : Mengenal Effect Pada JQuery</title>

</head>

<body>

<h1>Efect pada JQuery | www.malasngoding.com</h1>

<button id="tombol">Tampilkan/Sembunyikan kotak</button>

</body>

$(document).ready(function(){

$('#tombol').click(function(){

$('.box').toggle();

});

</script>

</html>

style.css

body{

font-family: sans-serif;

}

h1{

text-align: center;

}

.box{

height: 300px;

width:300px;

background: orange;

display: none;

}

#tombol,

#tombol2{

padding:10px;

color: #fff;

background: #34495E;

border: none;

}

See the Pen VePzVw by Malas Ngoding (@malasngoding) on CodePen.0

Cara Menggunakan Effect Slide Pada JQuery

untuk membuat effect slide dengan jquery caranya sangat mudah. sama seperti cara memuat effect hide, show dan toggle, anda hanya perlu mengubah function effect nya saja seperti contoh membuat effect slide pada jquery berikut ini. Belajar JQuery Mengenal Effect Pada JQuery

<!DOCTYPE html>

<html>

<head>

<title>Tutorial belajar JQuery Part 4 : Mengenal Effect Pada JQuery</title>

</head>

<body>

<h1>Efect pada JQuery | www.malasngoding.com</h1>

<button id="tombol">Tampilkan kotak (slideDown)</button>

<button id="tombol2">Sembunyikan kotak (slideUp)</button>

<button id="tombol3">Effect slide Toggle kotak (slideToggle)</button>

</body>

$(document).ready(function(){

$('#tombol').click(function(){

$('.box').slideDown();

});

$('#tombol2').click(function(){

$('.box').slideUp();

});

$('#tombol3').click(function(){

$('.box').slideToggle();

});

</script>

</html>

style.css

body{

font-family: sans-serif;

}

h1{

text-align: center;

}

.box{

height: 300px;

width:300px;

background: orange;

display: none;

}

#tombol,

#tombol2,

#tombol3{

padding:10px;

color: #fff;

background: #34495E;

border: none;

}

dan perhatikan contoh berikut untuk melihat hasil effect slide pada JQuery

See the Pen XXpaoy by Malas Ngoding (@malasngoding) on CodePen.0

Cara Menggunakan Effect Fade JQuery

index.html

<!DOCTYPE html>

<html>

<head>

<title>Tutorial belajar JQuery Part 4 : Mengenal Effect Pada JQuery</title>

</head>

<body>

<h1>Efect pada JQuery | www.malasngoding.com</h1>

<button id="tombol">Tampilkan kotak (fadeIn)</button>

<button id="tombol2">Sembunyikan kotak (fadeOut)</button>

<button id="tombol3">Effect slide Toggle kotak (fadeToggle)</button>

</body>

$(document).ready(function(){

$('#tombol').click(function(){

$('.box').fadeIn();

});

$('#tombol2').click(function(){

$('.box').fadeOut();

});

$('#tombol3').click(function(){

$('.box').fadeToggle();

});

</script>

</html>

style.css

body{

font-family: sans-serif;

}

h1{

text-align: center;

}

.box{

height: 300px;

width:300px;

background: orange;

display: none;

}

#tombol,

#tombol2,

#tombol3{

padding:10px;

color: #fff;

background: #34495E;

border: none;

}

See the Pen BjpdMW by Malas Ngoding (@malasngoding) on CodePen.0

Memberikan waktu durasi pada effect fade

Cara memberikan waktu durasi pada effect fade anda bisa memasukkan nilai durasi pada parameter function effet fade . anda bisa memberikan nilai slow atau fast pada parameter function fade.

1	$('.box').fadeIn('slow');

atau

1	$('.box').fadeIn('fast');

atau bisa juga memberikan nilai berupa angka untuk durasi waktu effect.

1	$('.box').fadeIn(1000);

perhatikan contoh memberi waktu durasi pada effect fade.

index.html

<!DOCTYPE html>

<html>

<head>

<title>Tutorial belajar JQuery Part 4 : Mengenal Effect Pada JQuery</title>

</head>

<body>

<h1>Efect pada JQuery | www.malasngoding.com</h1>

<button id="tombol">Tampilkan kotak (fadeIn)</button>

<button id="tombol2">Sembunyikan kotak (fadeOut)</button>

<button id="tombol3">Effect slide Toggle kotak (fadeToggle)</button>

</body>

$(document).ready(function(){

$('#tombol').click(function(){

$('.box').fadeIn(800);

});

$('#tombol2').click(function(){

$('.box').fadeOut('fast');

});

$('#tombol3').click(function(){

$('.box').fadeToggle(500);

});

</script>

</html>

style.css

body{

font-family: sans-serif;

}

h1{

text-align: center;

}

.box{

height: 300px;

width:300px;

background: orange;

display: none;

}

#tombol,

#tombol2,

#tombol3{

padding:10px;

color: #fff;

background: #34495E;

border: none;

}

See the Pen wMgqZd by Malas Ngoding (@malasngoding) on CodePen.0

Sekian tutorial belajar jquery mengenal effect pada jquery.

Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.