افکت Bounce در jQuery

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

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

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

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

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

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

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

direction : جهت اثر؛ می‌تواند “بالا (up)”، “پایین (down)”، “چپ (left)”، “راست (right)” باشد؛ به صورت پیش فرض “بالا (up)” است
distance : فاصله برای پرش؛ به صورت پیش فرض 20 است
mode : حالت اثر؛ می‌تواند “نمایش دادن (show)”، “پنهان کردن (hide)” یا “اثر کردن (effect)” باشد، به صورت پیش فرض “اثر کردن (effect)” است
times : زمان برای پرش؛ به صورت پیش فرض 5 است

مثال

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

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

            $("#button").click(function(){
               $(".target").effect( "bounce", {times:3}, 300 );
            });

         });
			
      </script>
		
      <style>
         p {background-color:#bca; width:200px; border:1px solid green;}
         div{ width:100px; height:100px; background:red;}
      </style>
		
   </head>
	
   <body>
      <p>Click the button</p>
      <button id = "button"> Bounce </button>

      <div class = "target">
      </div>
   </body>
</html>

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

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

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