Bu yazımızda jQuery ile efekt konularına giriş yapıyoruz. İlk konumuz bir elementi gösterip gizlemek. hide,show,slow, toggle metotları ile elementleri gösterip gizleyebiliriz.
hide ve show Metotlarının Kullanımı
jQuery hide ve show metotları ile elementleri gösterip gizleyebiliriz. Sözdizimi şu şekildedir.
$(seçici).hide(hız,callback);
$(seçici).show(hız,callback);
Bunu direk örnek üzerinden anlatalım. Bir sayfa oluşturup iki buton koyalım ve bir buton elementi gizlesin diğer buton ise gizlediğimiz elementi göstersin.
<script>
$(document).ready(function(){
$("#gizle").click(function(){
$("p").hide();
});
$("#goster").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>Butonlara tıklayarak beni gösterip gizleyebilirsin</p>
<button id="gizle">Gizle</button>
<button id="goster">Göster</button>
Ayrıca fonksiyonlara gösterip gizleme hızını da gönderebiliriz. Böylece daha güzel bir animasyona sahip olmuş oluruz.
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
});
})
</script>
</head>
<body>
<p>Butonlara tıklayarak beni gösterip gizleyebilirsin</p>
<button>Gizle</button>
toggle Metodunun Kullanımı
Toggle metodu ise göster ve gizle metodunun birleşmiş halidir.
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle(1000);
});
});
</script>
</head>
<body>
<button>Bu buton hem gösterir hem gizler</button>
<p>Zafer Yıldız.</p>
<p>Kodlamak Lazım</p>
