افکت Blind در jQuery

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

افکت Blind در jQuery در این مقاله از سری مقالات آموزش جی کوئری دویکس بررسی می‌شود. افکت Blind را می‌توان با تعریف پارامترهای show/hide/toggle استفاده کرد. این افکت عنصر را با Blind مخفی می‌کند یا با Blind کردن آن نشان می‌دهد.

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

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

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

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

direction : جهت اثر؛ می‌تواند “عمودی (vertical)” یا “افقی (horizontal)” باشد، به صورت پیش فرض عمودی است
mode : حالت اثر؛ می‌تواند “نمایش دادن (show)” یا “پنهان کردن (hide)” باشد، به صورت پیش فرض پنهان است

مثال

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

<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( "blind", {direction: "horizontal"}, 1000 );
            });

            $("#show").click(function(){
               $(".target").show( "blind", {direction: "horizontal"}, 1000 );
            });
				
         });
      </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 = "hide"> Hide </button>
      <button id = "show"> Show</button> 
		
      <div class = "target">
         <img src = "../images/jquery.jpg" alt = "jQuery" />
      </div>
   </body>
</html>

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

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

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

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

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

مثال