T
trgy
Misafir
Jquery ders serimize 2. dersimiz olan fade, slide metodlarından bahsederek devam ediyoruz. Dersin kaynak kodlarını konunun sonunda bulabilirsiniz.
Slide Methodu
Slide methodunu 1. dersimizde görmüştük. Tıkla beni! yazısına tıkladığımız zaman ekrandaki kırmızı kutu yavaşça kayboluyordu. Şimdi ne anlama geldiğini ve kaç çeşit olduğunu yazalım.
Türkçe anlamları
slide up, yukarı doğru kaydır.
slide down, aşağı doğru kaydır.
Örnek - 1 slideUp methodu
Kullanımı
Üstteki örnekte kırmızı kutu slideUp methodu uyguladığımız için yukarıya doğru kaybolmaktadır. Bu örneği internetsitenizde herhangi bir duyuru yaptığınız zaman kullanırsanız çok hoş olabilir.
Demo
Örnek - 2 slideDown methodu
Kullanımı
Yukarıdaki örnekte ise görünmeyen kırmızı kutuyu slideDown methodu ile aşağıya doğru kayarak görünür hale gelmesini sağlıyoruz. Kutuyu yok etmek için ilk başta css kodlarımıza display: none; ekledik.
Demo
Fade Methodu
Fade methodunu 2 farklı şekilde kullanabiliriz. Bunlar fadein ve fadeout methodlarıdır.
Türkçe anlamları
fade in, yavaş yavaş göster.
fade out, yavaş yavaş kaybol.
Örnek - 1 fadeOut methodu
Kullanımı
Yukarıda verdiğim örnekte slideUp methodunun yerine sadece fadeOut yazdım ve efekti gösterdim. fadeOut methodu ile işlem uyguladığımız kırmızı kutu yavaş yavaş kayboluyor.
Demo
Örnek - 2 fadeIn methodu
Kullanımı
Üstteki örnekte fadeIn methodunu kullanabilmek için css içerisinde #box div'ine display: none; ekleyerek yok ettik. jquery kodlarında ise fadeIn diyerek gizlediğimiz #box div'inin görünmesini istedik.
Demo
Sonuç olarak;
fadeIn ve slideDown methodları gizli olan birşeyi gösterme amaçlı kullanılır, fadeOut ve slideUp methodları ise görünen birşeyi gizlemek için kullanılır.
Kaynak Kodlar
Slide Methodu
Slide methodunu 1. dersimizde görmüştük. Tıkla beni! yazısına tıkladığımız zaman ekrandaki kırmızı kutu yavaşça kayboluyordu. Şimdi ne anlama geldiğini ve kaç çeşit olduğunu yazalım.
Türkçe anlamları
slide up, yukarı doğru kaydır.
slide down, aşağı doğru kaydır.
Örnek - 1 slideUp methodu
Kullanımı
HTML:
slideUp() //
slideUp(4000) // 4000 zaman belirtir. 4000 = 4 saniye
slideUp('fast') // fast 'in Türkçe karşılığı hızlı demektir. hızlı 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').slideUp(4000);
});
});
</script>
</head>
<body>
<div id="box"></div>
<a href="#">Tıkla beni!</a>
<br /><div style="z-index:3" class="smallfont" align="center">Content Relevant URLs by <a rel="nofollow" href="http://www.crawlability.com/vbseo/">vBSEO</a> 3.3.2</div>
</body>
</html>Demo
Örnek - 2 slideDown methodu
Kullanımı
HTML:
slideDown() //
slideDown(4000) // 4000 zaman belirtir. 4000 = 4 saniye
slideDown('fast') // fast 'in Türkçe karşılığı hızlı demektir. hızlı 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;
display: none;
}
</style>
<script type="text/javascript">
$(function() {
$('a').click(function() {
$('#box').slideDown(4000);
});
});
</script>
</head>
<body>
<div id="box"></div>
<a href="#">Tıkla beni!</a>
</body>
</html>Demo
Fade Methodu
Fade methodunu 2 farklı şekilde kullanabiliriz. Bunlar fadein ve fadeout methodlarıdır.
Türkçe anlamları
fade in, yavaş yavaş göster.
fade out, yavaş yavaş kaybol.
Örnek - 1 fadeOut methodu
Kullanımı
HTML:
fadeOut() //
fadeOut(4000) // 4000 zaman belirtir. 4000 = 4 saniye
fadeOut('fast') // fast 'in Türkçe karşılığı hızlı demektir. hızlı 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').fadeOut(4000);
});
});
</script>
</head>
<body>
<div id="box"></div>
<a href="#">Tıkla beni!</a>
</body>
</html>Demo
Örnek - 2 fadeIn methodu
Kullanımı
HTML:
fadeIn() //
fadeIn(4000) // 4000 zaman belirtir. 4000 = 4 saniye
fadeIn('fast') // fast 'in Türkçe karşılığı hızlı demektir. hızlı 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;
display: none;
}
</style>
<script type="text/javascript">
$(function() {
$('a').click(function() {
$('#box').fadeIn(4000);
});
});
</script>
</head>
<body>
<div id="box"></div>
<a href="#">Tıkla beni!</a>
</body>
</html>Demo
Sonuç olarak;
fadeIn ve slideDown methodları gizli olan birşeyi gösterme amaçlı kullanılır, fadeOut ve slideUp methodları ise görünen birşeyi gizlemek için kullanılır.
Kaynak Kodlar