عملیات Fading با استفاده از JQuery

عملیات Fading با استفاده از JQuery

بصورت کلی 4 روش در JQuery برای عملیات Fade یا محو کردن وجود دارد که هر چهار روش را در اینجا برای شما شرح خواهیم داد. گاهاً پیش می آید که در صفحات وب نیاز است مکان هایی یا اشیائی به هر دلیل محو شده یا به صورت پیمایشی نمایش داده شوند از قبیل اخبار ، Sliderها ، صفحات پیمایشی و غیره. برای این منظور باید از JQuery استفاده شود که طریقه استفاده از آن را خواهیم دید. بطور کلی 4 تابع برای این منظور وجود دارد : ()FadeIn() , FadeOut() , FadeTo() , FadeToggle

اولین تابعی که قرار است به آن بپرداریم تابع FadeIn می باشد که با استفاده از آن می توان یک شیء را در صفحه از حالت محو خارج کند. این تابع به 3 صورت قابل استفاده است :

تابع FadeIn

$("button").click(function(){
 $("#div1").fadeIn();
 $("#div2").fadeIn("slow");
 $("#div3").fadeIn(3000);
});

همان گونه که در قطعه کد قابل مشاهده است ، با استفاده از تابعی که در بالا نوشته شده، با قرار دادن یک دکمه و 3 تگ Div در صفحه می توان با کلیک بر روی دکمه هر 3 تگ را از حالت محو خارج کرده و نمایش داد. در اولین قسمت تابع ورودی نگرفته و مقدارها همه به صورت پیش فرض در نظر گرفته می شود ، در قسمت دوم نوع نمایش برای تابع مشخص شده که پارامترهای آن عبارتند از : Slow و Fast . در قسمت سوم هم تابع سرعت نمایش شیء را از کاربر گرفته که این عدد بر حسب میلی ثانیه محاسبه می شود.

دومین تابعی که عملیات محو کردن را برای ما انجام می دهد تابع FadeOut می باشد که همانند تابع بالا یک تگ یا شیء به عنوان ورودی از کاربر می گیرد سپس آن را در صفحه بعد از کلیک بر روی دکمه محو می کند. برای نمایش مجدد آن می توان از تابع FadeIn نیز استفاده کرد.

تابع FadeOut

$("button").click(function(){
 $("#div1").fadeOut();
 $("#div2").fadeOut("slow");
 $("#div3").fadeOut(3000);
});

در این قسمت تابع FadeToggle برای ما هم عملیات محو کردن و هم عملیات نمایش دادن یک شیء را انجام خواهد داد که به نسبت 2 تابع قبل از کاربرد بیشتری برخوردار است. کاربر با هر بار کلیک کردن بر روی دکمه می تواند حالت شیء موجود در صفحه را تغییر دهد. پارامترهای این تابع همانند توابع قبلی یکسان می باشد.

تابع FadeToggle

$("button").click(function(){
 $("#div1").fadeToggle();
 $("#div2").fadeToggle("slow");
 $("#div3").fadeToggle(3000);
});

تابعی که در این قسمت به آن می پردازیم عملیات محو کردن را همانند تابع FadeOut برای ما انجام می دهد با این تفاوت که تابع قبلی شیء موجود در صفحه را به طور کامل از حالت نمایش خارج می کرد اما در این تابع با مقداردهی به آن می توان وضوح شیء را در صفحه تغییر داد. در صورتی که به این تابع مقدار 0 داده شود کارایی آن همانند تابع FadeOut خواهد بود.

تابع FadeTo

$("button").click(function(){
 $("#div1").fadeTo("slow",0.15);
 $("#div2").fadeTo("slow",0.4);
 $("#div3").fadeTo("slow",0.7);
});



نظرات کاربران



عبارت امنیتی : حاصل 1 × 7 می شود :
متن پیام :