بررسی جلوه‌‌ها (Effects) در jQuery

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

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

بررسی جلوه‌‌ها (Effects) در jQuery – نمایش و پنهان کردن عناصر

دستورات نمایش و پنهان کردن عناصر تقریباً همان چیزی است که انتظار داریم؛ ()show عناصر را در یک مجموعه نشان دهد و ()hide آنها را پنهان کند. ساختار متد ()show :

[selector].show( speed, [callback] );

در زیر توضیحات همه پارامترها آمده است:

speed : رشته‌ای که یکی از سه سرعت از پیش تعریف شده (“slow”، “normal”، یا “fast”) یا تعداد میلی ثانیه برای اجرای انیمیشن (مثلاً 1000) را نشان می‌‎دهد.
callback : این پارامتر اختیاری تابعی را نشان می‌دهد که باید هر زمان که انیمیشن کامل شد اجرا شود. برای هر عنصر متحرک در مقابل یک بار اجرا می‌شود.

ساختار متد ()hide :

[selector].hide( speed, [callback] );

در زیر توضیحات همه پارامترها آمده است:

speed : رشته‌ای که یکی از سه سرعت از پیش تعریف شده (“slow”، “normal”، یا “fast”) یا تعداد میلی ثانیه برای اجرای انیمیشن (مثلاً 1000) را نشان می‌‎دهد.
callback : این پارامتر اختیاری تابعی را نشان می‌دهد که باید هر زمان که انیمیشن کامل شد اجرا شود. برای هر عنصر متحرک در مقابل یک بار اجرا می‌شود.

فایل HTML زیر را با یک کد JQuery کوچک در نظر بگیرید:

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

            $("#show").click(function () {
               $(".mydiv").show( 1000 );
            });

            $("#hide").click(function () {
               $(".mydiv").hide( 1000 );
            });
				
         });
      </script>
		
      <style>
         .mydiv{ 
            margin:10px;
            padding:12px; 
            border:2px solid #666; 
            width:100px; 
            height:100px;
         }
      </style>
   </head>
	
   <body>
      <div class = "mydiv">
         This is a SQUARE
      </div>

      <input id = "hide" type = "button" value = "Hide" />   
      <input id = "show" type = "button" value = "Show" />
   </body>
</html>

نتیجه:

بررسی جلوه‌‌ها (Effects) در jQuery – تغییر دادن عناصر (Toggling)

جی کوئری روش‌هایی را برای تغییر وضعیت نمایش عناصر بین نمایش یا پنهان ارائه می‌دهد. اگر عنصر در ابتدا نمایش داده شود، پنهان خواهد شد. اگر مخفی باشد نشان داده خواهد شد. ساختار ()toggle :

[selector]..toggle([speed][, callback]);

در زیر توضیحات همه پارامترها آمده است:

speed : رشته‌ای که یکی از سه سرعت از پیش تعریف شده (“slow”، “normal”، یا “fast”) یا تعداد میلی ثانیه برای اجرای انیمیشن (مثلاً 1000) را نشان می‌‎دهد.
callback : این پارامتر اختیاری تابعی را نشان می‌دهد که باید هر زمان که انیمیشن کامل شد اجرا شود. برای هر عنصر متحرک در مقابل یک بار اجرا می‌شود.

ما می‌توانیم هر عنصری را متحرک کنیم، مانند یک <div> ساده که حاوی یک تصویر است. به عنوان مثال:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $(".clickme").click(function(event){
               $(".target").toggle('slow', function(){
                  $(".log").text('Transition Complete');
               });
            });
         });
      </script>
		
      <style>
         .clickme{ 
            margin:10px;
            padding:12px; 
            border:2px solid #666; 
            width:100px; 
            height:50px;
         }
      </style>
   </head>
	
   <body>
      <div class = "content">
         <div class = "clickme">Click Me</div>
         <div class = "target">
            <img src = "./images/jquery.jpg" alt = "jQuery" />
         </div>
         <div class = "log"></div>
      </div>
   </body>
</html>

نتیجه:

متدهای اعمال جلوه‌های خاص در jQuery

شماره	متدها و توضیحات
1	animate( params, [duration, easing, callback] ) تابعی برای ساخت انیمیشن‌‎های سفارشی.
2	fadeIn( speed, [callback] ) با تنظیم تاری (opacity) آنها و ایجاد یک callback اختیاری پس از تکمیل، همه عناصر منطبق را محو می‌کند.
3	fadeOut( speed, [callback] ) تمام عناصر منطبق را با تنظیم تاری (opacity) آنها بر روی 0 محو کرده، سپس نمایشگر را روی “none” تنظیم و پس از تکمیل، یک callback اختیاری را تنظیم می‌کند.
4	fadeTo( speed, opacity, callback ) تاری (opacity) همه عناصر منطبق را به یک تاری (opacity) مشخص محو کرده و پس از تکمیل، یک callback اختیاری ایجاد می‌کند.
5	( )hide هر یک از مجموعه عناصر منطبق را در صورت نمایش پنهان می‌کند.
6	hide( speed, [callback] ) همه عناصر منطبق را با استفاده از یک انیمیشن زیبا مخفی کرده و پس از تکمیل، یک callback اختیاری ایجاد می‌کند.
7	( )show هر یک از مجموعه عناصر منطبق را در صورت پنهان بودن نمایش می‌دهد.
8	show( speed, [callback] ) همه عناصر منطبق را با استفاده از یک انیمیشن زیبا نشان داده و پس از تکمیل، یک callback اختیاری را اجرا می‌کند.
9	slideDown( speed, [callback] ) همه عناصر منطبق را با تنظیم ارتفاع آنها و ایجاد یک callback اختیاری پس از تکمیل، آشکار می‌کند.
10	slideToggle( speed, [callback] ) قابلیت مشاهده همه عناصر منطبق را با تنظیم ارتفاع آنها و ایجاد یک callback اختیاری پس از تکمیل، تغییر می‌دهد.
11	slideUp( speed, [callback] ) همه عناصر منطبق را با تنظیم ارتفاع آنها پنهان کرده و پس از تکمیل، یک callback اختیاری را برقرار می‌کند.
12	stop( [clearQueue, gotoEnd ]) تمام انیمیشن‌های در حال اجرا را روی تمام عناصر مشخص شده متوقف می‌کند.
13	( )toggle نمایش هر یک از مجموعه عناصر منطبق را تغییر می‌دهد.
14	toggle( speed, [callback] ) نمایش هر یک از مجموعه عناصر منطبق با استفاده از یک انیمیشن زیبا را تغییر داده و پس از تکمیل، یک callback اختیاری را فعال می‌کند.
15	toggle( switch ) نمایش هر یک از مجموعه عناصر منطبق بر اساس سوئیچ را تغییر داده (true همه عناصر را نشان می‌دهد، false همه عناصر را پنهان می‌کند).
16	jQuery.fx.off همه انیمیشن‌ها را به صورت سراسری غیرفعال می‌کند.

جلوه‌های مبتنی بر کتابخانه UI

برای استفاده از این افکت‌ها، می‌توانید آخرین jQuery UI Library jquery-ui-1.11.4.custom.zip را از کتابخانه jQuery UI دانلود کنید یا از Google CDN برای استفاده از آن به روشی مشابه که برای jQuery انجام دادیم استفاده کنید. ما از Google CDN برای jQuery UI با استفاده از قطعه کد زیر در صفحه HTML استفاده کرده‌ایم تا بتوانیم از jQuery UI استفاده کنیم:

<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
   </script>
</head>

شماره	متدها و توضیحات
1	Blind عنصر را پرده گذاری می‌کند یا پرده گذاری آن را نشان می‌دهد.
2	Bounce n بار عنصر را به صورت عمودی یا افقی پرتاب می‌کند.
3	Clip عنصر را به صورت عمودی یا افقی روشن یا خاموش می‌کند.
4	Drop عنصر را دور می‌اندازد.
5	Explode عنصر را به چند قطعه منفجر می‌کند.
6	Fold عنصر را مانند یک تکه کاغذ تا می‌کند.
7	Highlight پس زمینه را با رنگی مشخص برجسته می‌کند.
8	Puff مقیاس و محو کردن انیمیشن‌ها، جلوه پفکی را ایجاد می‌کند.
9	Pulsate تاری (opacity) عنصر را چندین بار ضربان می‌دهد.
10	Scale یک عنصر را با ضریب درصد کوچک یا بزرگ می‌کند.
11	Shake المان را n بار به صورت عمودی یا افقی تکان می‌دهد.
12	Size اندازه یک عنصر را به عرض و ارتفاع مشخص تغییر می‌دهد.
13	Slide عنصر را از درگاه دید خارج می‌کند.
14	Transfer طرح کلی یک عنصر را به عنصر دیگر منتقل می‌کند.

مقاله بررسی جلوه‌‌ها (Effects) در jQuery در اینجا به پایان می‌رسد، نظرات خود را با ما به اشتراک بگذارید.

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

میانگین رتبه : 1/5 - تعداد رای : 1