jQuery

ایجاد افکت fade با jquery و animate

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

سلام ;)

چیزی که در این مقاله می خواهیم انجام دهیم،ایجاد افکت fade در jquery است.افکت fade همانطور که می دانید به صورت ساده یعنی،تبدیل آهسته یک تصویر به تصویر دیگر که محو شدن تصویر اولیه را تداعی می کند(اگه نمی دونستید،حتما متوجه شدید دیگه!).برای همین ما دو تصویر آماده کرده ایم.یکی سیاه و سفید و یکی رنگی و می خواهیم کاری کنیم که با رفتن نشانگر موس روی تصویر سیاه و سفید،کم کم جایش را به عکس رنگی بدهد.کلید انجام این کار تابع animate است.این تابع قابلیت های فراوانی دارد ولی ما فقط می خواهیم ساده ترین روش استفاده از ان را با هم ببینیم.پس با ما همراه باشید.

اول کاری لازم،داشتن jQuery در سایت است.آن را از اینجا دریافت کرده و در سایت خود کپی کنید.دو تصویری مورد نیاز ما نیز اینها هستند:

حالا می توانیم با کد زیر،کتابخانه jQuery را به صفحه ی سایت الحاق کنیم:

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

کد CSS:

و کدهای لازم برای جاگذاری در صفحه:

وقتی تمام اینها را در کنار هم بگذاریم،صفحه زیر متولد می شود:

نمونه ای از نتیجه حاصله را می توانید در زیر ببینید:

امیدوارم لذت برده باشید.

منبع

11 Comments

  1. سلام
    خیلی آموزش مفیدی بود واقعا ممنون
    ولی اگه همینو بصورت css قرار بدید خیلی بهتره چون واقعا تو حجم سایت تاثیر داره
    بازم ممنون
    موفق باشید

    1. سلام دوست عزیز

      می دونید که وقتی ما position یک عنصر رو absolute بکنیم ،در صفحه شناور میشه و اگه top ,left و … بدیم ، با توجه به لبه های مرورگر موقعیت دهی انجام میشه یعنی از عنصر والدش رو نادیده میگیره.برای اینکه همچین عنصری رو بتونیم درون همون والدش موقعیت دهی کنیم ، باید position والد رو relative بدیم

      موفقیت

پاسخ دهید

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

آخرین مقالات فتولیا در ایمیل شما

در خبرنامه ما عضو شوید و آخرین مطالب و مقالات آموزشی را اول شما دریافت کنید