ممکنه شما نیاز به jQuery نداشته باشید (قسمت 3)

- visibility ٠ mode_comment

در این مطلب با ادامه مطالب مربوط با کدهای جایگزین برای jQuery در خدمتتون هستم و امیدوارم که بدردتون بخوره. Javascript-vs-jquery

موضوع 2 : افکتها و انیمیشنها

مورد 1 : Fade In یا نمایان شدن

برای اینکه در jQuery المنتی که مخفی هست رو به آرامی نمایش بدیم و یک افکت داشته باشه بصورت زیر عمل میکنیم:

el همون المنتی هست که قصد داریم اونو نمایان کنیم.

حالا این کار رو اگر بخوایم با Javascript خالص انجام بدیم بصورت زیر عمل میکنیم:

برای IE8 به بالا:

میبینید که در ابتدا یک تابع بنام fadeIn ساختیم و قصد داریم که کدهای مورد نظر رو در اون قرار بدیم. درون تابع یک متغیر بنام opacity تعریف میکنیم و اونو برابر با 0 قرار میدیم. شفافیت و فیلترهای المنت ورودی رو در ابتدا برابر با 0 و خالی قرار دادیم. یک متغیر بنام last تهیه شده و تاریخ فعلی در اون قرار داده شده.بعد از اون یک تابع بنام tick تعریف شده و وظیفش اینه که ذره ذره و با استفاده از الگوریتم خاصی که از زمان استفاده میکنه، opacity المنت رو کم کم زیاد میکنه تا به یک برسه. تا زمانی که شفافیت زیر 1 هست تابع tick هر 16 میلی ثانیه یکبار انجام میشه.

در نهایت میتونیم در هر جایی که خواستیم از این تابع fadeIn استفاده کنیم.

برای IE9 به بالا:

تفاوت اصلی که با IE8 داره اینه که دیگه از خاصیت filter استفاده نکرده، چون IE9 به بالا از opacity پشتیبانی میکنه. بقیه توضیحات مشابه هست.

برای IE10 به بالا:

برای این مورد از CSS در کنار JS استفاده میکنیم.

کدهای JS:

کدهای CSS:

همونطور که دیدید دو کلاس در CSS تعریف کردیم و با استفاده از اونا میتونیم المنت رو مخفی و نمایان کنیم. در ابتدا که عنصر کلاس hide رو داره و مخفی هست. حالا با استفاده از کد Javascript و با اضافه کردن کلاس show به el اون المنت نمایش داده میشه. در IE10 به بالا به دلیل اینکه از CSS3 پشتیبانی میکنه بهتره که از همون CSS برای نمایش دادن اون بصورت انیمیشنی استفاده کنیم، چون هم بهینه تر هست و هم دیگه نیازی نیست کد خاصی رو قرار بدیم و حجم کدها رو بیشتر کنیم.

امیدوارم که از این مطلب خوشتون اومده باشه.

موفق و سربلند باشید.

یا علی

Source

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.