متد fadeTo( speed, opacity, callback ) در jQuery

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

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

ساختار متد fadeTo( speed, opacity, callback ) در jQuery

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

selector.fadeTo(speed, opacity[, callback]);

پارامترهای متد

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

speed : رشته‌ای که یکی از سه سرعت از پیش تعریف شده (“slow”، “def”، یا “fast”) یا تعداد میلی ثانیه برای اجرای انیمیشن را نشان می‌دهد (مثلاً 1000)
opacity : عددی بین 0 و 1 که نشان دهنده میزان تاری عنصر هدف است
callback : این پارامتر اختیاری است و نشان دهنده یک تابع برای فراخوانی پس از تکمیل انیمیشن است

مثال

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

<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" language = "javascript">
   
         $(document).ready(function() {

            $("#more").click(function(){
               $(".target").fadeTo( 'slow', 0.7, function(){ 
                  $(".log").text('More Opacity Transition Complete');
               });
            });

            $("#less").click(function(){
               $(".target").fadeTo( 'slow', 0.2, function(){ 
                  $(".log").text('less Opacity Transition Complete');
               });
            });
				
         });
			
      </script>
		
      <style>
         p {background-color:#bca; width:200px; border:1px solid green;}
      </style>
   </head>
	
   <body>
      <p>Click on any of the buttons</p>
		
      <button id = "less"> Less Opacity </button>
      <button id = "more"> More Opacity</button> 
		
      <div class = "target">
         <img src = "../images/jquery.jpg" alt = "jQuery" />
      </div>
		
      <div class = "log"></div>
   </body>
</html>

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

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

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