jQuery ile Animasyon 2

16.06.2012Okunma Sayısı: 4759Kategori: JQuery

jQuery ile animasyon işlemlerine devam edelim.

Bu uygulamamızda resmimizi animasyonla büyütüp küçültelim.

 
<html>
            <head>
                        <title>jQuery & CSS</title>
                        <script src="jquery-1.5.1.js"></script>
                        <script type="text/javascript">
                                   var buyukMu = false;
                                   $(document).ready(function(){
                                               $("#btResimAnimasyon").click(function(){
                                                           $("#imgResim").slideToggle('fast');
                                                           if(buyukMu){
                                                                       $("#btResimAnimasyon").text("Küçült");
                                                           }
                                                           else{
                                                                       $("#btResimAnimasyon").text("Büyüt");
                                                           }
                                                           buyukMu = !buyukMu;
                                               });
                                   });
                        </script>
            </head>
            <body>
                        <button id="btResimAnimasyon">Küçült</button>
                        <hr/>
                        <img src="resim.jpg" id="imgResim"/>
                        <hr/>
            </body>
</html>

<html>
            <head>
                        <title>jQuery & CSS</title>
                        <script src="jquery-1.5.1.js"></script>
                        <script type="text/javascript">
                                   var buyukMu = false;
                                   $(document).ready(function(){
                                               $("#btResimAnimasyon").click(function(){
                                                           $("#imgResim").slideToggle('fast');
                                                           if(buyukMu){
                                                                       $("#btResimAnimasyon").text("Küçült");
                                                           }
                                                           else{
                                                                       $("#btResimAnimasyon").text("Büyüt");
                                                           }
                                                           buyukMu = !buyukMu;
                                               });
                                   });
                        </script>
            </head>
            <body>
                        <button id="btResimAnimasyon">Küçült</button>
                        <hr/>
                        <img src="resim.jpg" id="imgResim"/>
                        <hr/>
            </body>
</html>

buyukMu değişkeninde resmimizin büyük mü küçük mü olduğu bilgisi tutulmaktadır. Bu bilgiye göre butonun text’i değişmektedir.
$(“#imgResim”).slideToggle(‘fast’); fonksiyonu ile imgResim isimli resim elemanı hızlı bir animasyonla küçülüp kaybolur. “fast” yerine “slow” deseydik yavaş bir animsyonla küçülüp kaybolacaktı.
$(“#btResimAnimasyon”).text(“Büyüt”); fonksiyonu ile “btResimAnimasyon” isimli butonun text özelliğini değiştirir.

Veysel Uğur KIZMAZ

Bilgisayar Mühendisi

veysel@ugurkizmaz.com