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 :

value	description
("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()