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ş 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.
Bir de bu iki efekti aynı anda uygulamak için kullandığımız slideToggle() fonksiyonu var.
ÖRNEK KULLANIM $('div#metin').slideUp('normal'); $('div#metin').slideDown('normal'); $('div#metin').slideToggle('normal');
ŞİMDİ UYGULAYALIM <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript"> $(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") </script> <style type="text/css"> .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; } </style> </head> <body> <p> <button id="gizle">Gizle</button> <button id="goster">Göster</button> <button id="gizlegoster">Gizle/Göster </button> </p> <p> </p> <div class="makale"><img src="resim.gif" width="32" height="32" /><strong>Lorem ipsum</strong> 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.</div> </body> </html>
Şeffaflık Efektleri
ş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.
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.
Bir elemanın şeffaflık değeri 0 ile 1 arasında olabiliyor 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.
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.
<script type="text/javascript" src="http://ajax. microsoft <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery- 1.3.2.min.js"></script> <script type="text/javascript"> $(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) </script> <style type="text/css"> .kutu { background-color: #0FF; margin: 10px; padding: 5px; float: left; height: 200px; width: 350px; border: 1px inset #900; } .kutu img { border: 3px dotted #FFF; </style> </head> <body> <button id="seffaf">Şeffaflaştır</button> <button id="gorunur">Görünür Yap</button> <button id="ayarla">Ayarla</button> <div class="kutu"><img src="resim.gif" width="32" height="32" /><strong>Lorem ipsum</strong> 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.</div> </body> </html>
Özel Efektler
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
Gerisini animate() fonksiyonu hallediyor 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.
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
Üstteki örnekte efektin gerçekleşme süresi 3000 milisaniye idi Ü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.
{ $('div#metin').stop(); } </script>< <script type="text/javascript" src="http://ajax.microsoft.com/ajax/j Query/jquery- 1.3.2.min.js"></script><script type="text/javascript"> $(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(); } </script>< style type="text/css“>} div { border: 1px solid #CCCCCC; background: #FFFFCC; color:#555; font: normal 11px "Trebuchet MS"; width: 250px; padding: 10px } </style> </head> <body> <button id="degistir">Değiştir</button> <button id="durdur">Durdur</button> <br /><br /> <div><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> <br /><br /> <div id="metin"><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> </body></html>