jQuery Animasiyalar

jQuery Animasiyalar obyektin stilində edəcəyimiz dəyişiklikləri animasiya şəklində edir.

İstifadə qaydası: .animate(xüsusiyyətlər, sürət);

NÜMUNƏ 1
<style type="text/css">
.qutu {width:500px; background-color: #DBF799; padding: 3px; border: 1px #9AD115 solid; margin: 2px;}
.qutu2 {width:500px; background-color: #ECFEC2; padding: 3px; border: 1px #9AD115 solid; margin: 2px; height: 20px;}
</style>
<div id="d1a" class="qutu">Aşağıdakı qutunun hündürlüyünü 50 piksel et!</div>
<div id="d1b" class="qutu2"></div>
<script>
$("#d1a").click(function(){
   $("#d1b").animate({height: '50px'});
 });
</script>
Nəticəni görmək üçün klikləyin
 
NÜMUNƏ 2
Birdən çox dəyişikliyi tək bir animate() ilə edə bilərik.
<style type="text/css">
.qutu {width:500px; background-color: #DBF799; padding: 3px; border: 1px #9AD115 solid; margin: 2px;}
.qutu2 {width:500px; background-color: #ECFEC2; padding: 3px; border: 1px #9AD115 solid; margin: 2px; height: 20px;}
</style>
<div id="d2a" class="qutu">Aşağıdakı qutunun həm hündürlüyünü 50 px et, həm də şəffaflığını azalt!</div>
<div id="d2b" class="qutu2"></div>
<script>
$("#d2a").click(function(){
   $("#d2b").animate({
      height: '50px',
      opacity: '0.5'
   });
 });
</script>
Nəticəni görmək üçün klikləyin
 
NÜMUNƏ 3
Elementin xüsusiyyətində də əməliyyat edə bilərik.
<style type="text/css">
.qutu {width:500px; background-color: #DBF799; padding: 3px; border: 1px #9AD115 solid; margin: 2px;}
.qutu2 {width:500px; background-color: #ECFEC2; padding: 3px; border: 1px #9AD115 solid; margin: 2px; height: 20px;}
</style>
<div id="d3a" class="qutu">Aşağıdakı qutunun hündürlüyünü 50px artır</div>
<div id="d3b" class="qutu2"></div>
<script>
$("#d3a").click(function(){
   $("#d3b").animate({
      height: '+=50px'
   });
 });
</script>
Nəticəni görmək üçün klikləyin
 
NÜMUNƏ 4
Bundan başqa hide, show və toggle istifadə edilə bilər (xüsusiyyət olaraq).
<style type="text/css">
.qutu {width:500px; background-color: #DBF799; padding: 3px; border: 1px #9AD115 solid; margin: 2px;}
.qutu2 {width:500px; background-color: #ECFEC2; padding: 3px; border: 1px #9AD115 solid; margin: 2px; height: 20px;}
</style>
<div id="d4a" class="qutu">Aşağıdakı qutunu gizlə / göstər</div>
<div id="d4b" class="qutu2"></div>
<script>
$("#d4a").click(function(){
   $("#d4b").animate({
      height: 'toggle'
   });
 });
</script>
Nəticəni görmək üçün klikləyin

NÜMUNƏ 5
Müəyyən əməliyyatları növbəylə edib animasiya yarada bilərik.
<style type="text/css">
.qutu {width:500px; background-color: #DBF799; padding: 3px; border: 1px #9AD115 solid; margin: 2px;}
.qutu2 {width:500px; background-color: #ECFEC2; padding: 3px; border: 1px #9AD115 solid; margin: 2px; height: 20px;}
</style>
<div id="d5a" class="qutu">Aşağıdakı qutunu hərəkətə keçir</div>
<div id="d5b" class="qutu2"> </div>
<script>
$("#d5a").click(function(){
      var div=$("#d5b");
      div.animate({height:'300px',opacity:'0.4'},"slow");
      div.animate({width:'300px',opacity:'0.8'},"slow");


      div.animate({height:'100px',opacity:'0.4'},"slow");
      div.animate({width:'100px',opacity:'0.8'},"slow");
 });
</script>
Nəticəni görmək üçün klikləyin
 
NÜMUNƏ 6
Şrift ölçüsü ilə əlaqədar nizamlamalar üçün fontSize istifadə edilməlidir.
<style type="text/css">
.qutu {width:500px; background-color: #DBF799; padding: 3px; border: 1px #9AD115 solid; margin: 2px;}
.qutu2 {width:500px; background-color: #ECFEC2; padding: 3px; border: 1px #9AD115 solid; margin: 2px;}
</style>
<div id="d6a" class="qutu">Aşağıdakı yazının ölçüsünü artır</div>
<div id="d6b" class="qutu2">Salam hər kəsə!</div>
<script>
$("#d6a").click(function(){
      var div=$("#d6b");
      div.animate({fontSize:'3em'},"slow");
 });
</script>
Nəticəni görmək üçün klikləyin
jQuery