Khmer Web: Animation

ការផ្លាស់ប្តូរទីតាំង ទំហំ និង ទ្រង់ទ្រាយរបស់ធាតុ HTML ដែលភាសាអង់គ្លេសហៅថា animation នោះ អាចត្រូវធ្វើឡើង ដោយប្រើប្រាស់វិធីឈ្មោះ animate() នៅក្នុងកញ្ចប់ jQuery ។ ហើយទំរង់ទូទៅនៃវិធី animate() គឺដូចខាងក្រោមនេះ៖

$(selector).animate({params},speed,callback);

<!DOCTYPE html>
<html>
  <head>
    
    
  </head>
  <body style="font:14px/1.5 'Odor Mean Chey'">

	
    
    

   <script>
     $("button").click(function(){
    	$("div").animate({right: '600px'});
  	});
   </script>

  </body>
</html>

ក្រៅពីប្រើប្រាស់តំលៃ css តែមួយ យើងក៏អាចប្រើប្រាស់តំលៃ css ជាច្រើនព្រមពេលជាមួយគ្នាផងដែរ។

<!DOCTYPE html>
<html>
  <head>
    
    
  </head>
  <body style="font:14px/1.5 'Odor Mean Chey'">

	
    
    

   <script>
     $("button").click(function(){
    	$("div").animate({
        	right: '600px',
      		opacity: '0.5',
      		height: '150px',
      		width: '150px'
         });
     });
   </script>

  </body>
</html>

លើសពីនេះទៀត យើងក៏អាចប្រើប្រាស់តំលៃលេខ relative ផងដែរ

<!DOCTYPE html>
<html>
  <head>
    
    
  </head>
  <body style="font:14px/1.5 'Odor Mean Chey'">

	
    
    

   <script>
     $("button").click(function(){
    	$("div").animate({
        	right: '600px',
      		height: '+=150px',
      		width: '+=150px'
         });
     });
   </script>

  </body>
</html>

ក្នុងករណ៍ដែលយើងប្រើប្រាស់វិធី animate() ជាច្រើនក្នុងពេលតែមួយ វិធីទាំងនោះត្រូវយកទៅអនុវត្តមួយម្តង ៗ រហូតដល់អស់។

<!DOCTYPE html>
<html>
  <head>
    
    
  </head>
  <body style="font:14px/1.5 'Odor Mean Chey'">

	
    
    HELLO

   <script>
     $("button").click(function(){
    	var div = $("div");  
    		div.animate({right: '600px'}, "slow");
    		div.animate({fontSize: '3em'}, "slow");
     	});
   </script>

  </body>
</html>

HELLO