Sunum yükleniyor. Lütfen bekleyiniz

Sunum yükleniyor. Lütfen bekleyiniz

Slayt Efektleri. Slayt efektleri bir elemanın görünürlüğünü değiştirirler. slideDown() fonksiyonu ile gizli bir elemanı, yükseklik (height) değerini yavaş.

Benzer bir sunumlar


... konulu sunumlar: "Slayt Efektleri. Slayt efektleri bir elemanın görünürlüğünü değiştirirler. slideDown() fonksiyonu ile gizli bir elemanı, yükseklik (height) değerini yavaş."— Sunum transkripti:

1 Slayt Efektleri

2 Slayt efektleri bir elemanın görünürlüğünü değiştirirler. slideDown() fonksiyonu ile gizli bir elemanı, yükseklik (height) değerini yavaş yavaş arttırarak görünür kılıyoruz. Bunun tam tersi mantıkta çalışan slideUp() fonksiyonuyla ise görünür bir elemanı, yükseklik (height) değerini yavaş yavaş azaltarak gizlemiş oluyoruz.

3 Bir de bu iki efekti aynı anda uygulamak için kullandığımız slideToggle() fonksiyonu var.

4 ÖRNEK KULLANIM $('div#metin').slideUp('normal'); $('div#metin').slideDown('normal'); $('div#metin').slideToggle('normal');

5 ŞİMDİ UYGULAYALIM $(function() { $("button#gizle").click(gizle) $("button#goster").click(goster) $("button#gizlegoster").click(gostergizle) }) function gizle() { $("div.makale").slideUp("normal") } function goster() { $("div.makale").slideDown("normal") } function gostergizle() { $("div.makale").slideToggle("normal") }.makale { background-color: #EDEF9E; margin: 0px; padding: 5px; height: 200px; width: 350px; border: 2px solid #C00; }.makale img { border: 3px solid #FFF; margin: 3px; float: left; } Gizle Göster Gizle/Göster Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

6 Şeffaflık Efektleri

7 şeffaflık efektleriyle bir elemanın şeffaflık (opacity) değerini kullanarak görünürlüğünü değiştiriyoruz. fadeIn() fonksiyonu ile gizli bir elemanı, şeffaflık değerini yavaş yavaş arttırarak görünür kılıyoruz.

8 Bununla ters mantıkta çalışan fadeOut() fonksiyonuyla ise görünür bir elemanı, şeffaflık değerini yavaş yavaş azaltarak gizlemiş oluyoruz. Bunların yanında bir de fadeTo() isimli özel bir fonksiyon daha var. Bu fonksiyonun görevini alttaki paragrafta bulabilirsiniz.

9 Bir elemanın şeffaflık değeri 0 ile 1 arasında olabiliyor. şeffaflık değeri 0′a yakın olan eleman gizleniyormuş gibi algılanırken, şeffaflık değeri 1′e yakın olan bir eleman ise görünür olarak algılanır. Bu iki değer arasında oynamalar yaparak çeşitli efektler oluşturabiliriz.

10 işte fadeTo() isimli fonksiyon da bir elemanın şeffaflık değeri üzerinde oynama yapabilmektedir. Bu fonksiyonu $('div#metin').fadeTo('normal', 0.5); şeklinde kullanabiliriz. ilk önce "normal" parametresi ile efektin gerçekleşme hızını, daha sonra da elemanın "yeni şeffaflık değeri" belirtmiş oluyoruz.

11

12 $(document).ready(function(e) { $("button#seffaf").click(seffaflastir) $("button#gorunur").click(gorunuryap) $("button#ayarla").click(fadeto) }); function seffaflastir() { $("img").fadeOut(5000) } function gorunuryap() { $("img").fadeIn(5000) } function fadeto() { $("img").fadeTo(5000,0.2) }.kutu { background-color: #0FF; margin: 10px; padding: 5px; float: left; height: 200px; width: 350px; border: 1px inset #900; }.kutu img { border: 3px dotted #FFF; float: left; } Şeffaflaştır Görünür Yap Ayarla Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

13 Özel Efektler

14 Aslında buraya kadar anlattığımız bütün efektler, bir elemanın bazı CSS özellikleri üzerinde oynamalar yapılarak oluşturuluyorlar. Öyleyse biz de herhangi bir elemanın bazı CSS özelliklerini değiştirerek yeni efektler/animasyonlar oluşturabiliriz. Peki, bunu nasıl yapacağız? Cevap animate() fonksiyonunda

15 Gerisini animate() fonksiyonu hallediyor. Bu fonksiyonda dikkat etmeniz gereken tekşey, kullandığınız CSS özelliklerinin sayısal olarak arttırılabilir olmasıdır. ÖNEMLİ: Örneğin height:15px benzeri bir özellik sayısal olarak arttırılabilmesine karşın (15px, 25px, 55px… gibi), color:'red' benzeri bir özellik sayısal olarak arttırılamaz.

16

17 Bu örnekte ID özniteliği "metin" olan DIV elemanının width, padding ve fontSize özelliklerini değiştirmiş olduk. Ve bu değişimi 3000 milisaniyelik bir zaman dilimi içerisinde yaptık. Yani kendi efektimizi oluşturmuş olduk

18 Üstteki örnekte efektin gerçekleşme süresi 3000 milisaniye idi. Bazı zamanlar, efektin gerçekleşmesini durdurmak isteyebilir, yani 3000 milisayenin dolmasını beklememek isteyebiliriz. Böyle bir bir durumdaanimate() fonksiyonunun çalışmasını stop() isimli başka bir fonksiyon ile durdurabiliyorsunuz. Bu fonksiyonu $('div#metin').stop(); şeklinde kullanabilirsiniz.

19 Query/jquery min.js $(function(){ $('button#degistir').click( Degistir ); $('button#durdur').click( Durdur ); }); function Degistir() { $('div#metin').animate({ width: '450px', padding: '25px', fontSize: '16px' }, 3000 ); } function Durdur() { $('div#metin').stop(); } < style type="text/css“>} div { border: 1px solid #CCCCCC; background: #FFFFCC; color:#555; font: normal 11px "Trebuchet MS"; width: 250px; padding: 10px } Değiştir Durdur Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


"Slayt Efektleri. Slayt efektleri bir elemanın görünürlüğünü değiştirirler. slideDown() fonksiyonu ile gizli bir elemanı, yükseklik (height) değerini yavaş." indir ppt

Benzer bir sunumlar


Google Reklamları