Veysel Uğur KIZMAZ

jQuery ile Animasyon 1

16.06.2012Okunma Sayısı: 4940Kategori: JQuery

 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