T
trgy
Misafir
jquery ders serisinde 3. dersimizde show ve hide methodlarını anlatmaya çalışacağım. Her zamanki gibi dersin kaynak kodlarını dersin sonunda bulabilirsiniz.
Show Methodu
Show methodu ile kapalı olan herhangi bir şeyi güzel bir efekt ile göstermiş olacağız. Kullanımı oldukça basit.
Türkçe anlamı
show, göster.
Örnek - 1 Show methodu
Kullanımı
Üstteki örnekte tıkla beni yazısına tıkladığınız zaman 300px genişliğinde ve 300px uzunluğunda bir kırmızı bölge gözükecektir. Slide ve fade methodları ile yazım şekli ve kullanım şekli aynıdır.
Demo
Örnek - 2 Hide methodu
Kullanımı
Bu örnekte ise görünün bir kırmızı bölgeyi Tıkla beni! linkine tıkladığımızda yok eder.
Demo
Sonuç olarak;
Show ve hide methodlarınının slide ve fade methodlarının kullanımı arasında fark yoktur. Sadece basit efekt değişiklikleri oluşuyor.
Bir sonraki dersimizde ise sizlere toggle methodunu göstereceğim.
Kaynak Kodlar
Show Methodu
Show methodu ile kapalı olan herhangi bir şeyi güzel bir efekt ile göstermiş olacağız. Kullanımı oldukça basit.
Türkçe anlamı
show, göster.
Örnek - 1 Show methodu
Kullanımı
HTML:
show()
show(4000) // 4000 zaman belirtir. 4000 = 4 saniye
show('slow') // slow'un Türkçe karşılığı yavaş demektir. yavaş bir şekilde açılmasını söyler.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="jquery.min.js" type="text/javascript">
</script>
<style type="text/css">
#box {
background-color: red;
width: 300px;
height: 300px;
display: none;
}
</style>
<script type="text/javascript">
$(function() {
$('a').click(function() {
$('#box').show('slow');
});
});
</script>
</head>
<body>
<div id="box"></div>
<a href="#">Tıkla beni!</a>
</body>
</html>Üstteki örnekte tıkla beni yazısına tıkladığınız zaman 300px genişliğinde ve 300px uzunluğunda bir kırmızı bölge gözükecektir. Slide ve fade methodları ile yazım şekli ve kullanım şekli aynıdır.
Demo
Örnek - 2 Hide methodu
Kullanımı
HTML:
hide()
hide(4000) // 4000 zaman belirtir. 4000 = 4 saniye
hide('slow') // slow'un Türkçe karşılığı yavaş demektir. yavaş bir şekilde kapanmasını söyler.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="jquery.min.js" type="text/javascript">
</script>
<style type="text/css">
#box {
background-color: red;
width: 300px;
height: 300px;
}
</style>
<script type="text/javascript">
$(function() {
$('a').click(function() {
$('#box').hide('slow');
});
});
</script>
</head>
<body>
<div id="box"></div>
<a href="#">Tıkla beni!</a>
</body>
</html>Bu örnekte ise görünün bir kırmızı bölgeyi Tıkla beni! linkine tıkladığımızda yok eder.
Demo
Sonuç olarak;
Show ve hide methodlarınının slide ve fade methodlarının kullanımı arasında fark yoktur. Sadece basit efekt değişiklikleri oluşuyor.
Bir sonraki dersimizde ise sizlere toggle methodunu göstereceğim.
Kaynak Kodlar
