illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

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

0 261 ۱۲ دی ۹۴

در این مطلب با ادامه مطالب مربوط با کدهای جایگزین برای 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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram