آموزش JQuery Fade

در این بخش به آموزش محو کردن عناصر HTML با استفاده از JQuery می پردازیم.

با استفاده از کتابخانه JQuery شما می توانید عناصر html را محو کنید. jQuery متدهای مختلفی برای محو کردن عناصر دارد که شما می توانید از هر کدام از این متدها استفاده کنید.

متد fadeIn()

با استفاده از متد ()fadeIn در jQuery شما می توانید عناصری از html را که در حالت مخفی قرار دارند را ظاهر نمایید. مثال زیر نحوه انجام این کار را نمایش می دهد:

خط اول دستور JQuery که دستور ()document).ready)$ هست، به ما امکان می دهد وقتی یک صفحه یا سند HTML به طور کامل بارگذاری شد ، کاری را انجام دهیم. خط دوم که دستور ()button”).click")$ هست مشخص می کند که زمانی که کاربر بر روی button کلیک کرد، عنصر div را که در صفحه مخفی بوده، ظاهر گردد. دقت داشته باشید که متد ()fadeIn دو پارامتر اختیاری دارد که اولین پارامتر آن speed است و دومین پارامتر آن callback . با استفاده از پارامتر speed می توانید مقداری را به millisecond وارد نمایید تا عمل fade شدن در آن مدت زمانی که شما مشخص می کنید اتفاق بیفتد. از طریق پارامتر callback می توانید تابعی را مشخص نمایید تا بعد از انجام عمل fade این تابع اجرا گردد. مثال زیر fade کردن عناصر با مقادیر مختلف را نشان می دهد.

متد fadeout()

با استفاده از متد ()fadeout شما می توانید عناصر html را محو کنید. این متد نیز مانند متد ()fadeIn دو پارامتر ورودی و اختیاری به نام speed و callback دارد. مثال زیر نحوه استفاده از این متد را با استفاده مقادیر مختلف نمایش می دهد.

متد ()fadeToggle

با استفاده از متد ()fadeToggle در کتابخانه جی کوئری می توانید بین حالت های ()fadeIn و ()fadeout تغییر وضعیت دهید. این متد نیز مانند متد ()fadeIn دو پارامتر ورودی و اختیاری به نام speed و callback دارد. مثال زیر نحوه استفاده از این متد را با استفاده مقادیر مختلف نمایش می دهد.

متد ()fadeTo

با استفاده از متد ()fadeTo شما می توانید عمل محو کردن را تا مقدار opacity مورد نظر انجام دهید.پارامتر اجباری speed مدت زمان محو شدن را مشخص می کند. این پارامتر می تواند مقادیر ‘slow’ ، ‘fast’ و یا مقداری براساس millisecond را بگیرد.

پارامتر اجباری opacity در متد ()fadeTo محو شدن به یک مقدار مشخص (مقداری بین 0 تا 1) را تعیین می کند. پارامتر اختیاری callback تابعی است که پس از اتمام عملکرد متد ()fadeTo تکمیل می شود. مثال زیر نحوه استفاده از متد ()fadeTo را نشان می دهد.

آموزش JQuery آموزش طراحی سایت آموزش JQuery fade دوره آموزش طراحی سایت دوره آموزش jquery