Jquery Öğreniyoruz (Fade, Slide Methodları) - Ders 2

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ı
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>
Ü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ı
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>
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ı
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>
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ı
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>
Ü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
 

ozanTi

0
İyinet Üyesi
Katılım
23 Mart 2010
Mesajlar
4,807
Reaction score
88
Konum
Angara'nın Bağları
duyuru kısımlarının yok olmasında güzel oluyor bu uygulama. ellerine sağlık trgy. bir sonraki ders sanırım toggle anlatacaksın?
 
T

trgy

Misafir
toggle show ve hide methodlarını anlatacağım. 4. ders ise bunlardan oluşan çeşitli örneklerden oluşacak iyice kavrayacağız.
 

ozanTi

0
İyinet Üyesi
Katılım
23 Mart 2010
Mesajlar
4,807
Reaction score
88
Konum
Angara'nın Bağları
trgy benim bir sorum olacak ie jquery uygulamalarında sorun veriyor. bunu kullanıcıya yansıtmamayı nasıl sağlayacağız. sen ben chrome opera firefox ile durumu idare ediyoruz ama ie %60 pazar payına sahip. bu uygulamarı kullanıcıya nasıl göstereceğiz?
 
T

trgy

Misafir
activex denetimini etkinleştirmen lazım yoksa çalışmaz. demo linkine direk tıklarsan çalışması gerek ama. ie kaç seninkisi?
 

proofweb

0
İyinet Üyesi
Katılım
26 Şubat 2010
Mesajlar
213
Reaction score
0
Denedim Çalıştı bakmadan uyguladım başardım çok güzel bir uygulama tabi anlatan güzel anlattığı için.
 

Türkiye’nin ilk webmaster forum sitesi iyinet.com'da forum üyeleri tarafından yapılan tüm paylaşımlardan; Türk Ceza Kanunu’nun 20. Maddesinin, 5651 Sayılı Kanununun 4. maddesinin 2. fıkrasına göre, paylaşım yapan üyeler sorumludur.

Backlink ve Tanıtım Yazısı için iletişime geçmek için Skype Adresimiz: .cid.1580508955483fe5

Elektronik Sigara
pubg mobile uc
Üst