Jquey ile Objeleri Gösterme/Gizleme

Merhaba arkadaşlar bir jquey dersinde yine birlikteyiz.Önceki derslerimizde jquery ile ajax işlemleri üzerinde çalışmış ve bazı uygulamalar yapmıştık. Bu dersimizde ise jquery'nin diğer bir harikası olan efekt işlemlerinden gösterme / gizleme (show, hide, toogle) efektlerinden bahsedeceğiz.

Jquery'de gösterme gizleme efektleri 3 tanedir. Bunlar show (gösterme), hide (gizleme), toggle (göster/gizle) 'dır. Şimdi bu efektleri bir örnekle açıklayalım.

Örneğin sayfamızda içeriği resim ve yazılardan oluşan bir div objesi bulunsun. Bu objeye butonlar yardımı ile gösterme/gizleme işlevselliği katabiliriz. Bunu için ilk olarak jquery.js dosyamızı sayfamızın head tagları arasına dahil ediyoruz.

Kod:

<****** src="jquery.js" type="text/javascript"></******>

Daha sonra isimli fonksiyonlarımızı oluşturyoruz ve jquey kodlarımızı yazıyoruz.

Kod:

<****** type="text/javascript">

function goster()
{

$("div#panel").show(100);

}

function gizle()
{

$("div#panel").hide(100);

}

function gostergizle()
{

$("div#panel").toggle(100);

}

</******>

Burada $("div#panel" ) kodu efekti uyglayacağımız objeyi (id değeri panel olan div objesi) seçiyoruz.
.show(100) kodu seçili objeyi görünür hale getiriyor parantez içerisindeki değer (100) ile efektin hızını belirliyoruz.
.hide(100) kodu seçili objeyi gizli durumu getirmemizi sağlıyor.
.toggle(100) kodu ise hem gizleme hem gösterme işlemi yapıyor.Yani seçili obje gizli ise gösterme işlemi görünür ise gizleme işlemi yapıyor.

Son olarak uygulamanın basit bölümünü, butonlarımızı ve objemizi hazırlayarak dersimizi bitiriyoruz.

Kod:

<button Onclick="goster()">Göster</button>
<button Onclick="gizle()">Gizle</button>
<button Onclick="gostergizle()">Göster/Gizle</button>
<div id="panel" style="background-color:#FF9999;height:100;width:200;">Burası içeriğimizin bulunduğu div objesi</div>