تبلیغات

دوره H جی کوئری: درس 7: افکت ها

دوره آموزشی H جی کوئری

دوره H جی کوئری
درس 7 (آخر): افکت ها در جی کوئری


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

بالاخره به آخرین درس از دوره H آموزش جی کوئری رسیدیم؛ در این بخش به نحوه‌ی کار با افکت‌ها در جی کوئری می‌پردازیم.

Hide/Show, Fade, Slide

جی کوئری، روش‌های ساده ای را برای پیاده سازی افکت‌ها جهت ایجاد انیمیشن در اختیار ما قرار داده است.

متد Hide ، Show و Toggle

از دو متد Show و Hide، برای نمایش و مخفی کردن المنت‌های انتخاب شده، استفاده می‌کنیم و از متد Toggle برای سوئیچ بین این دو حالت؛ به این معنا که اگر مخفی بود نمایش داده شود و اگر مخفی نبود، مخفی شود.

هر سه متد، می‌توانند یک ورودی دلخواه داشته باشند و آن سرعت انجام انیمیشن (کار) است.این سرعت براساس میلی ثانیه خواهد بود.
در مثال زیر، ما سرعت را 1000 میلی ثانیه (1 ثانیه) قراره داده‌ایم:

هرسه متد، می‌توانند علاوه بر ورودی اول، یک ورودی دوم نیز داشته باشند؛ یک callback function که بعد از اتمام انیمیشن یا فرآیند، اجرا خواهد شد. و البته با callback function ها در جاوا اسکریپت باید آشنا باشید.

متد fadeIn ، fadeOut و fadeToggle

همانند متدهای hide و show ، جی کوئری متدهای fadeIn و fadeOut را نیز برایمان مهیا کرده است که یکی به تدریج محو شده و دیگری به تدریج ظاهر می‌شود ولی در متدهای قبلی، مخفی شدن و ظاهر شدن به صورت درجا اتفاق می‌افتد.
همانند قبل در این‌جا نیز fadeToggle برایمان مهیا شده است.
ورودی‌ها نیز همانند ورودی‌های متدهای قبلی می‌باشند.

متد دیگری نیز برای انجام عمل fading در جی کوئری به نام fadeTo وجود دارد که به ما اجازه میدهد تا عمل fading را بین یک opacity یا وضوح مشخصی انجام دهیم. این وضوح از 0 تا 1 بوده و دومین پارامتر از متد می‌باشد که در این صورت پارامتر callback ، سومین پارامتر متد خواهد بود.

متد slideUp ، slideDown و slideToggle

از این متدها نیز برای ایجاد عمل sliding استفاده می‌شود؛ منظور از sliding ، باز و بسته شدن کشویی یک عنصری می‌باشد.
این متدها نیز همانند دو مورد قبل استفاده می‌شوند و ورودیشان نیز همانند آنان است.

()animate

متد animate ، به ما این اجازه را می‌دهد تا یک مقداری از ویژگی‌های CSS را متحرک سازی کنیم. این مقداردهی CSS براساس فرمت جیسون (JSON) می‌باشد.
بنابراین ورودی اول این متد، ویژگی‌های CSS را در ساختار جیسون دریافت کرده و ورودی دوم نیز همانند متدهای قبل، سرعت را براساس میلی ثانیه تعیین می‌کند. در مثال زیر، عرض المنت‌های انتخاب شده، در طول یک ثانیه به 250 پیکسل تغییر می‌یابند.
این متد همانند متدهایی که در بالا معرفی شد، دو ورودی زمان و callback را نیز دارد؛ زمان در ورودی دوم و callback نیز در ورودی سوم استفاده می‌شود. در واقع متدهای قبلی نیز از این متد استفاده می کنند.

می‌توان هر نوع ویژگی CSS را با استفاده از Syntax بالا، انیمیت کرد. اما یک چیز را به خاطر بسپارید: از آن‌جایی که متد بالا ورودی جیسون از ما می‌گیرد، بنابراین باید در نوشتن نام ویژگی‌ها، به صورت camelCase رفتار کنیم. به این صورت که اگر ویژگی padding-left را می‌خواهیم بنویسیم، باید آن را به صورت paddingLeft بنویسیم.

انیمیت چند ویژگی باهم

اگر با جیسون آشنا باشید، می‌دانید که با کاما می‌توانیم ویژگی‌ها را از هم جدا کنیم؛ از این رو، برای انیمیت چند ویژگی باهم، از کاما برای جدا کردن ویژگی‌ها استفاده می‌کنیم.

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

همچنین ما می‌توانیم مقدارهارا به نستبی کم و زیاد کنیم، ابتدا مثال زیر را در نظر بگیرید:

در این‌جا، طول و عرض 250 تا زیاد خواهند شد؛ این یعتی مقدارشان 250 پیکسل نمی‌شود بلکه 250 پیکسل به مقدار فعلیشان اضافه می‌شود.
می‌توانیم با غلامت منها نیز آن را کم کنیم.

برای توقف انیمیشنی که هنوز تمام نشده است، جی کودری متد stop را برایمان مهیا دیده است.

صف انیمیت

فرض کنید شما چندین بار پشت سر هم متد animate رای المنت(های) انتخاب شده فراخوانی می‌کنید؛ در این حالت، جی کوئری به صورت داخلی، برای این فراخوانی ها یک صف تولید کرده و به ترتیب و یکی پس از دیگری آن‌ها را اجرا می‌کنید.
برای مثال:

ایجاد یک Drop-Down Menu

بیایید بعد از این همه درسی که یاد گرفتیم، یک پروژه بسیار ساده‌ای را در کنار هم انجام دهیم.
فرض کنید که یک سایتی دارید و سایت شما دارای منوهایی در هدر خود می‌باشد؛ با کلیک روی منوها، گزینه‌های آن به صورت اسلاید باز شده و برایمان نمایش داده میشود.

در این‌جا، ظاهر منوی خود را با HTML طراحی کرده‌ایم، اما چیزی که می‌خواهیم این است تا زمانی که ماوس روی آن کلیک کرد، منو در صورت باز بودن بسته و در صورت بسته بودن، باز شود. پس به راحتی از متد slideToggle برای اسلاید کردن آن محتوای که داخل المنت submenu می‌باشد، استفاده می‌کنیم.


پایان دوره‌ی h آموزش جی کوئری. امیدوارم لذت برده باشید.

درس قبلی
تبلیغات
0
کانال تلگرام فول کده
تبلیغات

درباره نویسنده

هادی اکبرزاده

[ مدیر فول کده ]

علاقه‌مند به اشتراک گذاری اطلاعات در هر زمینه‌ای / برنامه‌نویس و دانشجوی ارشد رشته شبیه‌ساز هوشمند - در حال نوشتن یه رمان (اگه خدا بخواد و تموم شه ?)

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

نظرات ثبت شده بدون دیدگاه