لوگو دویکس
ورود / ثبت نام
افکت Scale در jQuery

افکت Scale در jQuery

دسته بندی : آموزش jQuery سطح مقاله : متوسط زمان مطالعه : 3 دقیقه آخرین بروز رسانی: 23 شهریور 1401

افکت Scale در jQuery در این مقاله از سری مقالات آموزش جی کوئری دویکس بررسی می‌شود. افکت Scale را می‌توان با پارامترهای نمایش دادن (show) / پنهان کردن (hide) / تغییر دادن (toggle) استفاده کرد. این افکت یک عنصر را با ضریب درصد، کوچک یا بزرگ می‌کند.

ساختار افکت Scale در jQuery

در اینجا نحو و ساختار ساده برای استفاده از این افکت آمده است:

selector.hide|show|toggle( "scale", {arguments}, speed );

پارامترهای افکت

در اینجا تمام پارامترهای استفاده شده توسط این افکت توضیح داده شده است:

  • direction : جهت اثر؛ می‌تواند “عمودی (vertical)“، “افقی (horizontal)” یا “هر دو (both)” باشد؛ به صورت پیش فرض “هر دو (both)“ است
  • from : حالت در ابتدا، معمولاً مورد نیاز نیست؛ این پارامتر یک شی خواهد بود و به شکل { height: .., width: .. } مقدار دهی می‌شود.
  • origin : نقطه ناپدید شدن، این پارامتر یک آرایه است و به طور پیش‌فرض روی [‘middle’,’center’] تنظیم شده است
  • percent : درصد مقیاس به عدد، به صورت پیش فرض 0/100 است
  • scale : تعیین می‌کند که کدام قسمت از عنصر باید سایزش تغییر کند: «box» یا «محتوا content» یا «هردو both». مقدار box اندازه کادر حاشیه و پدینگ عنصر را تغییر می‌دهد و مقدار content هر محتوای داخل عنصر را تغییر می‌دهد، به صورت پیش فرض both است

مثال

در قطعه کد زیر یک مثال ساده آورده شده است که استفاده از این افکت را نشان می‌دهد:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.js">
      </script>
		
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
   
         $(document).ready(function() {

            $("#hide").click(function(){
               $(".target").hide( "scale", {percent: 200, direction: 'horizontal'}, 2000 );
            });

            $("#show").click(function(){
               $(".target").show( "scale", {percent: 200, direction: 'vertical' }, 2000 );
            });
				
         });
			
      </script>
		
      <style>
         p {background-color:#bca; width:200px; border:1px solid green;}
         div{ width:100px; height:100px; background:red;}
      </style>
   </head>
	
   <body>
      <p>Click on any of the buttons</p>
		
      <button id = "hide"> Hide </button>
      <button id = "show"> Show</button> 
  
      <div class = "target">
      </div>
   </body>
</html>

این مقاله در اینجا به پایان رسید، امیدواریم از مطالعه آن لذت برده باشید. برای دسترسی به لیست کامل افکت‌های jQuery به مقاله بررسی جلوه‌‌ها (Effects) در jQuery مراجعه کنید.

این مقاله چقدر براتون مفید بود؟

اولین امتیاز را ثبت کنید😊