افکت show در جی کوئری

افکت show یکی از متدهای نمایش و مخفی سازی در jQuery است. این متد عنصری را که پنهان است دوباره در صفحه نمایان می کند و در صورت تعیین مدت زمان، تغییر وضعیت را به شکل تدریجی نشان می دهد. به همین دلیل از آن برای نمایش پیام، بخش توضیحات، منوی بازشونده یا محتوایی که با کلیک کاربر ظاهر می شود استفاده می کنند.

رفتار آن از نظر هدف به افکت fadeIn نزدیک است، اما شیوه نمایش یکسان نیست. متد show ابعاد عنصر را نیز وارد روند نمایش می کند؛ fadeIn بیشتر بر تغییر شفافیت تمرکز دارد. انتخاب میان این دو به جلوه مورد نظر و تجربه ای که برای کاربر طراحی می کنید بستگی دارد.

عنصر مورد نظر باید در آغاز مخفی باشد تا فراخوانی متد، تغییری قابل مشاهده ایجاد کند. این مخفی بودن می تواند نتیجه استفاده از افکت hide، متد fadeOut یا تنظیم ویژگی display: none در CSS باشد. برای آشنایی بیشتر با این ویژگی می توانید مطلب خاصیت display را نیز بخوانید.

متد show را روی یک انتخابگر jQuery اجرا می کنید. انتخابگر مشخص می کند کدام عنصر یا گروهی از عناصر باید نمایش داده شوند. شکل عمومی دستور به این صورت است:

$( "selector" ).show( speed, callback );

هر دو پارامتر speed و callback اختیاری هستند. اگر آن ها را وارد نکنید، عنصر بدون انیمیشن و بلافاصله نمایش داده می شود. اگر مدت زمان یا نام سرعت را مشخص کنید، jQuery نمایش را به صورت انیمیشنی اجرا می کند.

پارامتر selector در واقع بخشی از عبارت jQuery است که عنصر هدف را پیدا می کند. برای انتخاب یک عنصر با شناسه، نام شناسه را پس از علامت مربع می آورید؛ برای انتخاب گروهی از پاراگراف ها نیز می توانید از نام تگ استفاده کنید.

برای نمونه، در عبارت $("#message") عنصری با شناسه message انتخاب می شود. اگر همان عنصر در صفحه مخفی باشد، فراخوانی show آن را نمایش می دهد. پیش از اجرا، مطمئن شوید شناسه در صفحه وجود دارد و با شناسه عنصر دیگری تکرار نشده است.

پارامتر speed مدت زمان اجرای انیمیشن را مشخص می کند. می توانید مقدار را به صورت عددی بر حسب میلی ثانیه وارد کنید یا از نام های آماده slow و fast استفاده کنید. برای مثال، مقدار 400 یعنی انیمیشن در چهارصد میلی ثانیه اجرا شود.

اگر speed حذف شود، مقدار پیش فرض صفر در نظر گرفته می شود و عنصر بدون افکت تدریجی ظاهر خواهد شد. مقادیر نام دار، خوانایی کد را بیشتر می کنند؛ مقدار عددی نیز وقتی مفید است که بخواهید زمان نمایش را دقیق تر با ریتم رابط کاربری هماهنگ کنید.

نام normal نیز برای انتخاب سرعت معمول در دسترس است. زمان دقیق مقادیر نام دار را بهتر است وابسته به نسخه و نیاز پروژه در نظر بگیرید و در صورتی که کنترل دقیق اهمیت دارد، یک مقدار عددی مشخص انتخاب کنید.

callback نام تابعی است که پس از پایان انیمیشن اجرا می شود. چون این پارامتر اختیاری است، فقط زمانی آن را اضافه کنید که لازم باشد پس از نمایش عنصر کار دیگری انجام شود؛ برای مثال، فعال کردن یک کنترل یا به روزرسانی بخشی از رابط کاربری.

قرار دادن دستورهای بعدی داخل callback کمک می کند آن ها پیش از پایان افکت اجرا نشوند. این نکته زمانی اهمیت دارد که مرحله بعدی به نمایان شدن کامل عنصر وابسته باشد. اگر چنین وابستگی ای ندارید، می توانید callback را حذف کنید تا کد ساده تر بماند.

$( "#message" ).show( 400, function() {
  console.log( "The element is visible." );
});

در نمونه زیر، با کلیک روی عنصری که شناسه show دارد، پاراگراف های صفحه نمایش داده می شوند. اگر می خواهید فقط یک بخش خاص ظاهر شود، به جای انتخابگر عمومی p از شناسه یا کلاس همان بخش استفاده کنید.

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

برای نمایش تدریجی، می توانید سرعت را به دستور اضافه کنید. اگر یک تابع هم پس از پایان انیمیشن نیاز دارید، آن را به عنوان پارامتر دوم قرار دهید:

$( "#show" ).click( function() {
  $( "#message" ).show( "slow", function() {
    console.log( " نمایش کامل شد " );
  });
});

برای آن که رویداد کلیک و افکت به درستی کار کنند، کتابخانه jQuery باید در صفحه بارگذاری شده باشد و کد پس از آماده شدن عناصر DOM اجرا شود. همچنین وجود عنصری با شناسه show و بخش هدف با شناسه message را در HTML بررسی کنید.

افکت show زمانی مناسب است که بخواهید عنصر مخفی را آشکار کنید و نمایش تدریجی آن با طراحی صفحه هماهنگ باشد. برای کنترل بیشتر، پیش از انتخاب متد به نوع عنصر، نحوه مخفی شدن آن و نتیجه بصری مورد انتظار توجه کنید.

اگر هدف فقط تغییر شفافیت باشد، fadeIn می تواند گزینه مناسب تری باشد. اگر می خواهید عنصر مخفی شود، از hide یا fadeOut استفاده کنید. نگه داشتن رفتارهای نمایش و مخفی سازی در یک الگوی روشن، کد را برای خودتان و دیگر اعضای تیم قابل فهم تر می کند.

اگر عنصر از ابتدا قابل مشاهده باشد، اجرای show ممکن است تغییر مشخصی در صفحه ایجاد نکند. در چنین وضعیتی ابتدا بررسی کنید که عنصر واقعا با CSS یا یک متد دیگر مخفی شده باشد. ابزارهای توسعه مرورگر می توانند مقدار display و قوانین CSS موثر بر عنصر را نشان دهند.

غلط املایی در شناسه، استفاده نکردن از علامت مناسب یا اجرای کد پیش از آماده شدن DOM می تواند باعث شود عنصر هدف پیدا نشود. شناسه موجود در HTML را با selector مقایسه کنید و کد را در زمان مناسب اجرا کنید. انتخابگر عمومی مثل p نیز ممکن است بیش از یک عنصر را تحت تاثیر قرار دهد.

مدت بسیار کوتاه ممکن است افکت را برای کاربر نامحسوس کند و زمان طولانی نیز می تواند تعامل را کند جلوه دهد. سرعت را در محیط واقعی صفحه آزمایش کنید و بر اساس نوع محتوا، دستگاه و هدف تجربه کاربری تصمیم بگیرید. برای نمایش یک پیام کوتاه، معمولا به زمان طولانی نیاز نیست.

افکت show در jQuery راهی ساده برای نمایش عنصرهای مخفی است. با انتخاب selector درست، تعیین مناسب speed و استفاده اختیاری از callback می توانید رفتار نمایش را با نیاز صفحه هماهنگ کنید. اگر فقط تغییر شفافیت مد نظر است، افکت fadeIn را هم بررسی کنید.

پیش از انتشار کد، مطمئن شوید عنصر هدف در صفحه وجود دارد، وضعیت مخفی آن درست تنظیم شده و انیمیشن با سرعت مناسبی اجرا می شود. انتخاب آگاهانه متد و آزمایش نتیجه در صفحه واقعی، به ساخت تجربه ای روان تر در طراحی سایت کمک می کند.