Tutorial jQuery Part 4
Hai
semuanya hari ini saya mau mengajak kita untuk memperlajari topik baru
yaitu membuat efek fade dengan jQuery. Di tutorial kali ini saya ingin
membagikan efek yang ada yaitu fadeIn() dan fadeOut() sama dengan metode
sebelumnya(tutorial sebelumnya) metode ini bisa menggunakan keyword
fast dan slow.
Seperti tutorial-tutorial sebelumnya, kita mulai dengan menggetikkan element-element tag di html:
Setelah
itu kita mulai dengan menuliskan element yang akan digunakan kali ini
kita menggunakan div dan button yang dimana button berfungsi untuk
memanggil function yang akan kita tulis dan diambil sesuai dengan id
sedangkan div berfungsi untuk menampilkan efek fade:
Setelah selesai, maka kita akan memulai dengan mengetikkan CSS untuk div atau button sesuai dengan yang kita inginkan :
Untuk
function yang akan kita ketikkan dimulai dengan script jquery yaitu
yang sama dengan sebelum-sebelumnya menggunakan jquery-2.1.4.js yang
bisa kita download di internet atau di situs resmi jQuery (jquery.com). Setelah itu barulah kita mengetikkan function fadeIn dan fadeOut yang kita padukan dengan keyword fast dan slow.
Pertama
kita ambil id yang sudah kita ketikkan di button kita lalu masukkan
function sesuai dengan id dan buttonnya. Maka codingnya :
Jadi output nya akan seperti ini (ketika fadein) :
Dan output ketika fadeout (perlahan-lahan hilang ) :
Tetapi
untuk coding ini agak meribetkan karna kita ketika mengklik fadein pada
saat di fungsi fadein maka tidak akan ada pengaruh bukan? Maka akan
dapat di persingkat menjadi 1 button dimana ketika mengklik buttonnya
akan membaca apakah sudah dalam kondisi fadein ketika di klik jika sudah
maka akan menampilkan efek fade out dan sebaliknya.
Untuk
dapat menjalankannya maka kita akan memasuki metode baru yaitu
fadeToggle(). Dimana fungsi fadeToggle ini adalah menampilkan efek
sesuai pada kondisi saat ini. Maka kita hanya akan mengubah fuunction
di function javascript kita menjadi lebih singkat yaitu :
Dan untuk buttonnya kita menggantinya menjadi 1 button saja. Maka codingnya adalah :
Dan outputnya adalah :
 |
| ketika fade in |
 |
| ketika fade out |
Thankyou for reading and have a nice day May God bless you :)
"Most good programmers do programming not because they expect to
get paid or get adulation by the public, but because it is fun to
program."
- Linus Torvalds
No comments:
Post a Comment