حذف رنگ تصویر با jQuery

  • منتشر شده در تاریخ

حذف رنگ تصویر با jQuery

در این آموزش , قصد داریم به شما نحوه حذف رنگ تصویر با jQuery با بردن اشاره گر ماوس (hover) بر روی تصویر را نشان بدیم. در آموزش قبلی , نحوه ساخت افکت انیمیشنی fade in / fade out را توسط جی کوئری را دیدیم.

ما انیمیشن تصویر پشت زمینه را توسط سلکتور کلاس در CSS مدیریت می کنیم. توسط جی کوئری ما کلاس مورد نظر را با رویداد mouseover و mouseout به تصویر اضافه/حذف می کنیم.

حذف رنگ تصویر با jQuery

کد HTML نمایش تصاویر

تگ های img زیر برای افزودن افکت حذف رنگ تصویر با jQuery قرار داده شده اند.

تابع jQuery برای حذف رنگ تصاویر

این دو تابع jQuery برای افزودن/حذف استایل های CSS به منظور ایجاد افکت های سیاه و سفید بر روی تصویر استفاده می شود.

و استایل های CSS :

برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.

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

موفق و پیروز باشید.

حسن شفیعی علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران

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

    دوره های آموزشی