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


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

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

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

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

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

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

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

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

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

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

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

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

حتما بخوانید  خواندن JSON در جی کوئری

دانلــود بـاکـــس

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

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

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

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

جدیدترین آموزش های آنلاین



دانلود رایگان (هدیه ویژه)

کتاب آموزش زبان برنامه نویسی PHP را دانلود و همین امروز یادگیری را شروع کن و به جمع برنامه نویسان ملحق شو ;)

دانلود رایگان کتاب

بخش کاربران

هنوز عضو نیستید ؟ کلیک کنید

مجوزهای ما

logo-enamd
logo-samandehi

دانلود کتاب

عضویت در خبرنامه