menyembunyikan widget / tulisan jQuery fadeIn() fadeOut() `

Bagaimanakah cara menuliskan / membuat tulisan , gambar , widget tersembunyi dan terlihat menggunakan script jQuery fadeIn() fadeOut() . . .?
jumpa lagi dengan mastony yang sudah lama gak update dikarenakan sibuk di ofline ,, bailkah pada kesempatan kita kali ini kita akan bahas cara menyembunyikan widget / gambar , tulisan sekalipun yaitu menggunakan script jquery fadeIn() fadeOut() .
oy , pada artikel mastony sebelumnya sudah membahas cara menyembunyikan widget / tulisan / gambar juga namun menggunakan javascript silahkan anda baca disini jika sudah baca mari kita lanjut
contoh :
$("SELECTOR / #").click(function(){$("P").fadeOut();});
adapun beberapa value untuk fadeOut() maupun fadeIn() untuk mengontrol kecepatan element tersebut menghilang atau menampakkan selengkapnya silahkan lihat pada tabel dibawah :
valuedescription
("slow")perubahan element akan lambat
("fast")perubahan element akan cepat
(2000)sesuaikan perubahan menggunakan milisecond
baiklah kita akan membuat sebuah 3 element div dengan ID div1 , div2 dan div3 ..

fadeOut()
fadeOut("slow")
fadeOut(2000)


nah hasil diatas seperti berikut ini penulisannya ..

<button>HIDE ELEMENT DIV</button>
<div id="div1" style="width:100px;height:100px;background:red;color:white;font-weight:bold;text-align:center;">fadeOut()</div>
<div id="div2" style="width:100px;height:100px;background:blue;color:white;font-weight:bold;text-align:center;">fadeOut("slow")</div>
<div id="div3" style="width:100px;height:100px;background:green;color:white;font-weight:bold;text-align:center;">fadeOut(2000)</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script>$(document).ready(function(){$("button").click(function(){$("#div1").fadeOut(); $("#div2").fadeOut("slow"); $("#div3").fadeOut(2000);
});});
CATATAN : jQuery instal
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
untuk penginstalan script jquery anda bisa meletakkan di widget element blog di pakai langsung juga bisa .
untuk penulisan script jquery
 $(document).ready(function(){$("SELECTOR").click(function(){$("SELECTOR") .. ubah disini .. });});

contoh berikutnya seperti berikut :
SHOW HIDE

PILIH / HOVER TULISAN HIDE / SHOW DI ATAS MAKA TULISAN INI AKAN MENGHILANG / MENAMPAKKAN


atas seperti berikut ini penulisan jquery script nya ..
<span id="show">SHOW </span> <span id="hide">HIDE</span>
<p style="color: green; font-family: courier;">
PILIH / HOVER TULISAN HIDE / SHOW DI ATAS MAKA TULISAN INI AKAN MENGHILANG / MENAMPAKKAN</p>
<script>
$(document).ready(function(){$("#show").hover(function(){$("p").fadeIn();}); $("#hide").hover(function(){$("p").fadeOut();});});
</script>
dan mungkin saya rasa cukup sekian mengenai pembahasan cara menyembunyikan widget / tulisan menggunakan script jQuery semoga bermanfaat untuk sobat ..

Terima kasih Anda telah membaca Artikel mengenai menyembunyikan widget / tulisan jQuery fadeIn() fadeOut() dan Kata kunci untuk Artikel ini yaitu menyembunyikan widget / tulisan jQuery fadeIn() fadeOut()

2 komentar:

  1. makasih boss dah berbagi meski puyeng gua kena Jquery..hehehe..maklum masih newbie

    BalasHapus
  2. boss kemana aja nih kok jadi ngga pernah update postingan yang baru lagi?

    BalasHapus

Silahkan Anda Komentarkan Tentang Post ini yang baik dan sopan,
Jangan sampai komentar anda dianggap spam . . .