افکت Transfer در jQuery

افکت Transfer در jQuery

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

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

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

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

selector.effect( "transfer", {arguments}, speed );

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

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

  • className : نام کلاس؛ اختیاری است و عنصر انتقال را دریافت خواهد کرد
  • to : انتخابگر جی کوئری، عنصری که باید به آن منتقل شود

مثال

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

<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() {

            $("div").click(function () {
               var i = 1 - $("div").index(this);
               $(this).effect("transfer",{ to: $("div").eq(i) }, 500);
            });
				
         });
			
      </script>
		
      <style>
         div.green { margin: 0px; width: 100px; height: 80px; background: green; 
            border: 1px solid black; position: relative; }
				
         div.red { margin-top: 10px; width: 50px; height: 30px; background: red; 
            border: 1px solid black; position: relative; }
				
         /* Following is required  to show border while transferring.*/
         .ui-effects-transfer { border: 2px solid black; }
      </style>
		
   </head>
	
   <body>
      <p>Click any of the squares:</p>
		
      <div class = "green"></div>
      <div class = "red"></div>
   </body>
</html>

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

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

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