"/>"/>
Yazılım Dilleri
Asp.Net 4.5 Kitabı
Skip Navigation Links

jQuery ile Animasyon 1

jQuery ile animasyon işlemlerinden hide ve show fonksiyonlarını inceleyelim.

 jQuery ile gizleme ve gösterme animasyonlarını inceleyelim.

 
Örnek uygulamamızda “GİZLE” butonuna bastığımızda istediğimiz hızda gizleme, “GÖSTER” butonuna bastığımızda istediğimiz hızda gösterme işlemini gerçekleştirelim
 
 
  1. <html>
  2.             <head>
  3.                         <title>jQuery & CSS</title>
  4.                         <script src="jquery-1.5.1.js"></script>
  5.                         <script type="text/javascript">
  6.                                    $(document).ready(function(){
  7.                                                $("#btGoster").click(function(){
  8.                                                            $("#metin").show("fast");
  9.                                                });
  10.                                                $("#btGizle").click(function(){
  11.                                                            $("#metin").hide("slow");
  12.                                                });
  13.                                    });
  14.                         </script>
  15.             </head>
  16.             <body>
  17.                         <button id="btGizle">GİZLE</button>
  18.                         <button id="btGoster">GÖSTER</button>
  19.                         <hr/>
  20.                         <div id="metin" style="height:200px;">Veysel Uğur KIZMAZ</div>
  21.                         <hr/>
  22.             </body>
  23. </html>
 
 
  1. $(“#metin”).show(“fast”) fonksiyonu, “metin” nesnesinin hızlı bir animasyonla görünmesini sağlar.
  2. $(“#metin”).hide(“slow”) fonksiyonu, “metin” nesnesinin yavaş bir animasyonla gizlenmesini sağlar.
  3. Show ve Hide fonksiyonlarının içine “slow”, “fast” yerine kaç milisaniye’de kapanmasını istiyorsak değerini de yazabiliriz.

 

Veysel Uğur KIZMAZ

Bilgisayar Mühendisi
veysel@ugurkizmaz.com

Yorumlar (0)

Yorum Yap

Mail listesine katılmak için tıklayınız

Hakkımdaki son bilgilere anlık erişmek için mail listesine katılabilirsiniz.