جهت مطالعه به ادامه مطلب مراجعه فرمائید

تابع Callback در jquery

تابع Callback در جیکوئری بعد از اینکه عمل مخفی (و یا آشکار شدن) کامل شد اجرا می شود.
مثال با تابع Callbackدر مثال زیر تابع alert بعد از اجرا شدن افکت hide اجرا میشود:

کد:

$(“button”).click(function(){ $(“p”).hide(“slow”,function(){ alert(“The paragraph is now hidden”); }); });

مثال بدون تابع Callbackدر مثال زیر تابع alert قبل از اجرا شدن افکت hide اجرا میشود:

کد:

$(“button”).click(function(){ $(“p”).hide(1000); alert(“The paragraph is now hidden”); });

دستورات پشت سر هم (زنجیره ای) در جی کوئری

در جی کوئری می‌توان از خصوصیت فراخوانی زنجیره‌ای متدھا استفاده نمود و این باعث می‌شود چندین کد فقط در یک سطر قرار گیرد و در نتیجه کد بسیار مختصر گردد.در مثال زیر می‌خواهیم تمام عناصر تگ <div> در صورتی که دارای کلاس notLongForThisWorld باشند را مخفی (با فید شدن) کنیم.

کد:

$(“div.notLongForThisWorld”).fadeOut();

یکی از مزیت‌های اکثر متدهای قابل اجرا بروی مجموعه عناصر انتخاب شده آن است که خروجی خود آنها مجموعه‌ای دیگر است. به این معنا که خروجی این متد، آماده اعمال یک متد دیگر است.

فرض کنید در مثال بالا بخواهیم پس از مخفی کردن هر تگ <div> بخواهیم یک کلاس به نام removedبه آن بیافزاییم. به این منظور می‌توان کدی مانند زیر نوشت:

کد:

$(“div.notLongForThisWorld”).fadeOut().addClass(“removed”);

این زنجیره متدها می‌توانند به هرتعداد ادامه پیدا کند.

افکت ( ) fadeOut در jQuery

در این بخش از آموزش jquery ، افکت fadeOut را در طراحی سایت آموزش می دهیم.

افکت fadeOut باعث می شود تا عنصر مورد اثر آن به تدریج از حالت نمایان به حالت مخفی در بیاید. این افکت در یک افکت تصویری با کم کردن نور عنصر به تدریج باعث مخفی شدن آن از دید کاربر می شود .

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

کد:

$ ( ” selector ” ).fadeOut ( speed , callback )

selector :عنصری است که این افکت باعث مخفی شدن آن می شود .

speed :این پارامتر اختیاری بوده و مقدار پیش فرض آن صفر است .

این پارامتر سرعت مخفی شدن عنصر توسط افکت را تعین می کند .

این پارامتر به دو صورت قابل مقداردهی می باشد .

تعیین به وسیله زمان بر حسب میلی ثانیه : در این حالت مدت زمانی که می خواهید در آن عنصر به تدریج مخفی شود را نعیین می کنید . مثلا ۱۰۰ ms .

تعیین بر اساس ۳ حالت کلی زیر :

در این حالت با انتخاب یکی از ۳ مقدار زیر سرعت مخفی شدن را آرام ، معمولی و یا سریع انتخاب می نمایید .

“slow”

“normal”

“fast”

callback : توسط این پارامتر می توان نام یک تابع را تعیین کنید تا پس از پایان یافتن اجرای افکت و مخفی شدن عنصر مورد نظر ، آن تابع اجرا شود .

به کار بردن این پارامتر اختیاری است .

مثال زیر کاربرد افکت fadeOut را نشان میدهد:مثال زیر تمام تگ <p> موجود در صفحه که مرئی و قابل دیده شدن میباشند را به تدریج محو می کند.

کد:

$(“button”).click(function(){ $(“p”).fadeOut(); })

مثال دیگر :

کد:

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

افکت ( ) fadeTo در jQuery

در این بخش از آموزش jquery ، افکت fadeTo را در طراحی سایت آموزش می دهیم.

افکت fadeTo میزان شفافیت و وضوح نمایش یک عنصر را به تدریج به یک مقدار تعیین شده از سوی کاربر تغییر می دهد .

به عبارت دیگر افکت fadeTo میزان نور نمایش یک عنصر را کم یا زیاد می کند .

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

کد:

$ ( ” selector ” ).fadeTo ( speed , opacity , callback )

selector :selector عنصری است که این افکت باعث تغییر وضوح نمایش آن می شود .

speed : این پارامتر در این متد اجباری بوده و حتما باید مقدار دهی شود . در غیر این صورت افکت کار نخواهد کرد .

این پارامتر سرعت تغییر وضوح تصویر عنصر توسط افکت را تعین می کند .

این پارامتر به دو صورت قابل مقداردهی می باشد .

تعیین به وسیله زمان بر حسب میلی ثانیه : در این حالت مدت زمانی که می خواهید در آن وضوح تصویرعنصر تغییر کند را نعیین می کنید . مثلا ۱۰۰ ms .

تعیین بر اساس ۳ حالت کلی زیر :

در این حالت با انتخاب یکی از ۳ مقدار زیر سرعت تغییر وضوح تصویر عنصر را آرام ، معمولی و یا سریع انتخاب می نمایید .

“slow”

“normal”

“fast”

opacity :این پارامتر در این متد اجباری بوده و حتما باید مقدار دهی شود . در غیر این صورت افکت کار نخواهد کرد . .

این پارامتر میزان تغییر وضوح تصویر عنصر را تعیین می کند . مقداری که به این پارامتر می توان داد باید عددی بین ۰٫۰ تا ۱ باشد و هر چه عدد انتخاب شده کمتر باشد ، وضوح تصویر عنصر هم کمتر خواهد بود .

callback : توسط این پارامتر می توان نام یک تابع را تعیین کنید تا پس از پایان یافتن اجرای افکت و تغییر وضوح تصویر عنصر مورد نظر ، آن تابع اجرا شود .

به کار بردن این پارامتر اختیاری است . مثال زیر کاربرد افکت fadeTo را نشان میدهد:

کد:

$(“button”).click(function(){ $(“p”).fadeTo(1000,0.4); });

مثال زیر روش استفاده از متد fade را با مقادیر متفاوت نشان می دهد :

کد:

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

 

افکت ( ) hide در jQuery

در این بخش از آموزش jquery ، افکت ( ) hide را در طراحی سایت آموزش می دهیم.

افکت ( ) hide باعث مخفی شدن عنصر مورد نظر می شود . عمکلرد این افکت بسیار شبیه به افکت fadeOut می باشد .

بوسیلهافکت ( ) hide می توانید این اختیار را به کاربر بدهید تا عناصری را که در صفحه لازم ندارد ، مخفی کند .

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

کد:

$ ( ” selector ” ).hide ( speed , callback )

selector :selector عنصری است که این افکت باعث مخفی شدن آن می شود .

speed : این پارامتر در این افکت اختیاری بوده و مقدار پیش فرض آن صفر است .

این پارامتر سرعت مخفی شدن عنصر توسط افکت را تعین می کند .

این پارامتر به دو صورت قابل مقداردهی می باشد .

تعیین به وسیله زمان بر حسب میلی ثانیه : در این حالت مدت زمانی که می خواهید در آن عنصر مخفی شود را نعیین می کنید . مثلا ۱۰۰ ms .

تعیین بر اساس ۳ حالت کلی زیر :

در این حالت با انتخاب یکی از ۳ مقدار زیر سرعت مخفی شدن را آرام ، معمولی و یا سریع انتخاب می نمایید .

“slow”

“normal”

“fast”

callback : توسط این پارامتر می توان نام یک تابع را تعیین کنید تا پس از پایان پافتن اجرای افکت و مخفی شدن عنصر مورد نظر ، آن تابع اجرا شود .

به کار بردن این پارامتر اختیاری است .مثال زیر کاربرد افکت ( ) hide را نشان میدهد :

کد:

$(“button”).click(function(){ $(“p”).hide(); });

با افکت Hide در جی کوئری شما میتواند یک عنصر در HTML را مخفی کنید.

کد:

$(“#hide”).click(function(){ $(“p”).hide(); });

 

افکت ( ) show در jQuery

در این بخش از آموزش jquery ، افکت show را در طراحی سایت آموزش می دهیم.

افکت show عنصری که مخفی است را نمایان می کند . عملکرد این افکت همانند افکت fadeIn می باشد . بدیهی است عنصری که با این افکت نمایان می شود باید در ابتدا مخفی باشد .

افکت show بر روی عناصری که با یکی از افکت های hide یا fadeOut در jQuery مخفی شده اند و یا خاصیت display آنها در css برابر با none باشد ، اثر خواهد داشت .

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

کد:

$ ( ” selector ” ).show ( speed , callback )

selector : selector عنصری است که این افکت باعث نمایان شدن آن می شود .

speed :این پارامتر در این افکت اختیاری بوده و مقدار پیش فرض آن صفر است .

این پارامتر سرعت نمایان شدن عنصر توسط افکت را تعین می کند .

این پارامتر به دو صورت قابل مقداردهی می باشد .

تعیین به وسیله زمان بر حسب میلی ثانیه : در این حالت مدت زمانی که می خواهید در آن عنصر نمایان شود را نعیین می کنید . مثلا ۱۰۰ ms .

تعیین بر اساس ۳ حالت کلی زیر :

در این حالت با انتخاب یکی از ۳ مقدار زیر سرعت نمایان شدن را آرام ، معمولی و یا سریع انتخاب می نمایید .

“slow”

“normal”

“fast”

توسط این پارامتر می توان نام یک تابع را تعیین کنید تا پس از پایان پافتن اجرای افکت و نمایان شدن عنصر مورد نظر ، آن تابع اجرا شود .

callback :به کار بردن این پارامتر اختیاری است . با افکت show در جی کوئری شما میتواند یک عنصر در HTML را از حالت مخفی خارج کنید.

کد:

$(“#show”).click(function(){ $(“p”).show(); });

پارامترهای اختیاری برای این دستور “slow”, “fast” , “milliseconds” میباشند .

کد:

$(selector).show(speed,callback);

افکت ( ) slideDown در jQuery

در این بخش از آموزش jquery ، افکت SlideDown را در طراحی سایت آموزش می دهیم.

افکت slideDown با افزایش تدریجی ارتفاع یک عنصر مخفی ، آن را از حالت مخفی به حالت نمایان در می آورد . در واقع این افکت این کار را در قالب یک افکت تصویری انجام می دهد . بدیهی است این افکت بر روی عنصری موثر است که در ابتدا مخفی باشد .

افکت slideDown بر روی عناصری که با یکی از افکت های hide یا fadeOut در jQuery مخفی شده اند و یا خاصیت display آنها درcss برابر با none باشد ، اثر خواهد داشت . کار افکت slideDown این است که کشویی باز میکند.شکل کلی استفاده از این متد به شرح زیر است :

کد:

$ ( ” selector ” ).slideDown ( speed , callback )

مثال زیر کاربرد افکت slideDown را نشان میدهد:

کد:

$(“#dadebaran.ir”).click(function(){ $(“#panel”).slideDown(); });

هر وقت روی محتویات تگی که از ای دی به نام dadebaran.ir استفاده می کند کلیک شود محتویات تگی که از ای دی panel استفاده می کند بصورت اسلایدی نمایش داده شود .

افکت ( ) slideUp در jQuery

در این بخش از آموزش jquery ، افکت SlideUp را در طراحی سایت آموزش می دهیم.

افکت slideUp با کاهش تدریجی ارتفاع یک عنصر باعث مخفی شدن آن می شود .

در واقع این افکت این کار را در قالب یک افکت تصویری انجام می دهد .

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

کد:

$ ( ” selector ” ).slideUp ( speed , callback )

selector : selector عنصری است که این افکت باعث مخفی شدن آن می شود .

speed : این پارامتر در این افکت اختیاری بوده و مقدار پیش فرض آن صفر است .

این پارامتر سرعت مخفی شدن عنصر توسط افکت را تعین می کند .

این پارامتر به دو صورت قابل مقداردهی می باشد .

تعیین به وسیله زمان بر حسب میلی ثانیه : در این حالت مدت زمانی که می خواهید در آن عنصر مخفی شود را نعیین می کنید . مثلا ۱۰۰ ms .

تعیین بر اساس ۳ حالت کلی زیر :

در این حالت با انتخاب یکی از ۳ مقدار زیر سرعت مخفی شدن را آرام ، معمولی و یا سریع انتخاب می نمایید .

“slow”

“normal”

“fast”

callback : توسط این پارامتر می توان نام یک تابع را تعیین کنید تا پس از پایان پافتن اجرای افکت و مخفی شدن عنصر مورد نظر ، آن تابع اجرا شود .

به کار بردن این پارامتر اختیاری است .

مثال زیر کاربرد افکت slideUp را نشان میدهد:

کد:

$(“#flip”).click(function(){ $(“#panel”).slideUp(); });

 

افکت ( ) animate در jQuery

در این بخش از آموزش jquery ، افکت animate را در طراحی سایت آموزش می دهیم.

افکت animate بوسیله تغییر یک یا چند خاصیت CSS عنصر مورد نظر از یک حالت اولیه به مقداری جدید یک عمل انیمیشن را انجام می دهد .

مقدار خاصیت یا خاصیت های CSS تعیین شده برای تغییر در عنصر مورد نظر توسط یک افکت ( ) animate بصورت آهسته از مقدار اولیه به مقدار ثانویه تغییر می کنند که باعث ایجاد یک حالت انیمیشن می شود .

فرض کنید یک تگ div به رنگ پس زمینه سبز دارید . مقدار خاصیت height ( ارتفاع ) آن در حالت اولیه px 100 است .

می خواهید بوسیله خاصیت ( ) animate مقدار ارتفاع آن را به px 300 افزایش دهید . در هنگام اجرای ( ) animate ارتفاع عنصر به صورت آهسته از ۱۰۰ به ۳۰۰ افزایش می یابد و باعث ایجاد یک افکت تصویری می شود .

افکت ( ) animate فقط با خواص CSS ای که مقادیر آنها عددی است مثل (Height : 30 px ) کار می کند و نمی تواند آن را با خواصی که مقدار رشته ای دارند مثل ( background-color:red ) به کار ببرید .

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

کد:

( selector ).animate ( {styles} , speed , easing , callback ) ;

مثال زیر کاربردافکت animate را نشان میدهد:

کد:

$(“button”).click(function(){ $(“div”).animate({left:’250px’}); });

هرگاه روی دکمه ای از نوع button کلیک کردیم جلوه انیمیشن روی محتویات تگ div انجام شود و …

افکت ( ) delay در jQuery

در این بخش از آموزش jquery ، افکت delay را در طراحی سایت آموزش می دهیم.

افکت delay باعث ایجاد یک تاخیر در اجرای افکت دیگری می شود .

برای مثال فرض کنید که یک افکت ( ) fadeIn را برای یک عنصر تعیین کرده اید .

این افکت در هنگام کلیک کاربر بر روی دکمه فرمان اجرا می شود .

اما می خواهید کاری کنید تا مثلا ۳ ثانیه بعد از کلیک کاربر بر روی دکمه فرمان ، افکت ( ) fadeIn اجرا شود . برای این منظور بایستی ازافکت delay به همراه آن استفاده کنید .

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

کد:

Syntax $( selector ).delay( speed ) ;

selector : این پارامتر تعیین کننده id عنصری است که می خواهیم در اجرای یک افکت بر روی آن ، تاخیر ایجاد نماییم .

speed : این پاراتر تعیین کننده مدت زمان تاخیر در اجرای افکت است .

انواع مقادیر ممکن عبارتند از :

MiliSecond : مدت زمان تاخیر در اجرای افکت بر حسب میلی ثانیه .

Slow : سرعت آهسته .

Fast : سرعت زیاد .

مثال زیر کاربرد افکت delay را نشان میدهد .

کد:

$(“button”).click(function(){ $(“#div1”).delay(“slow”).fadeIn(); $(“#div2”).delay(“fast”).fadeIn(); });

در خط ۱ با کلیک روی محتوای تگ button تابع اجرا شود

افکت ( ) slideToggle در jQuery

در این بخش از آموزش jquery ، افکت SlideToggle را در طراحی سایت آموزش می دهیم.افکت slideToggle همانند یک عملگر دوجانبه بین دو افکت slideUp و افکت slideDown بر روی عنصر مورد اثر خود عمل می کند .

به عبارت دیگر افکت slideToggle ابتدا وصغیت نمایش و یا عدم نمایش عنصر را بررسی کرده و در صورتی که آن عنصر نمایان باشد ، با کاهش تدریجی ارتفاع آن باعث مخفی شدن عنصر می شود . و چنانچه عنصر مخفی باشد با افزایش تدریجی ارتفاع آن ، عنصر را نمایان می سازد .

افکت slideToggle کاربرد بسیار سودمندی می تواند داشته باشد . به وسیله آن می توانید این اختیار را به کاربر بدهید تا عناصری را که می خواهد در صفحه مخفی کرده و یا آنها را نمایان سازد .کار افکت slideToggle این است که حلقه وار افکت میدهد .

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

کد:

$ ( ” selector ” ).slideToggle ( speed , callback )

selector :selector عنصری است که این افکت باعث مخفی و یا نمایان شدن آن می شود .

speed :این پارامتر در این افکت اختیاری بوده و مقدار پیش فرض آن صفر است .

این پارامتر سرعت مخفی و یا نمایان شدن عنصر توسط افکت را تعین می کند .

این پارامتر به دو صورت قابل مقداردهی می باشد .

تعیین به وسیله زمان بر حسب میلی ثانیه : در این حالت مدت زمانی که می خواهید در آن عنصر مخفی یا نمایان شود را نعیین می کنید . مثلا ۱۰۰ ms .

تعیین بر اساس ۳ حالت کلی زیر : در این حالت با انتخاب یکی از ۳ مقدار زیر سرعت مخفی یا نمایان شدن را آرام ، معمولی و یا سریع انتخاب می نمایید .

“slow”

“normal”

“fast”

callback :توسط این پارامتر می توان نام یک تابع را تعیین کنید تا پس از پایان یافتن اجرای افکت ، آن تابع اجرا شود .

به کار بردن این پارامتر اختیاری است .

مثال زیر کاربردافکت slideToggle را نشان میدهد:

کد:

$(“#flip”).click(function(){ $(“#panel”).slideToggle(); });

افکت ( ) toggle در jQuery

در این بخش از آموزش jquery ، افکت toggle را در طراحی سایت آموزش می دهیم.

افکت ( ) toggle بین دو افکت ( ) show و افکت ( ) hide تغییر وضعیت می دهد .افکت ( ) toggle وضعیت نمایش و یا عدم نمایش عنصر مورد نظر رابر روی صفحه می سنجد . اگر عنصر در حال نمایش باشد آن را با استفاده از متد Hide مخفی کرده و اگر عنصر مخفی باشد آن را با استفاده از متد Show نمایش می دهد .

افکت ( ) toggle برای عناصری که از ابتدای اجرای صفحه مخفی تعیین شده اند ، کار نمی کند .

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

کد:

$( selector ).toggle( speed , easing , callback ) ;

selector : تعیین کننده id عنصری است که می خواهیم افکت ( ) toggle ، بر روی آن اجرا شود .

speed : این پارامتر تعیین کننده سرعت انجام افکت و تغییر حالت عنصر از حالت اول به دوم است . استفاده از این پارامتر اختیاری است .

انواع مقادیر ممکن عبارتند از :

۱) MiliSecond : مدت زمان اجرای افکت بر حسب میلی ثانیه .

۲) Slow : سرعت آهسته

۳) Fast : سرعت زیاد

easing :این پارامتر تعیین کننده سرعت انجام افکت در ابتدا و انتهای آن است . استفاده از این پارامتر اختیاری است .

انواع مقادیر ممکن عبارتند از :

۱) Swing :سرعت انجام افکت در ابتدا و انتهای فرایند آهسته ولی در وسط آن زیاد است .

۲) Liner : سرعت در کل طول فرایند یکسان است .

به وسیله این پارامتر می توانیم یک تابع را تعیین کنیم ، تا در پایان انجام افکت ( ) toggle ، اجرا شود .

function :استفاده از این پارامتر اختیاری است .

مثال زیر کاربرد افکت ( ) toggle را نشان میدهد :

کد:

$(“button”).click(function(){ $(“p”).toggle(); });

 

افکت ( ) fadeIn در jQuery

در این بخش از آموزش jquery ، افکت fadeIn را در طراحی سایت آموزش می دهیم.

افکت fadeIn باعث می شود تا عنصر مورد اثر آن به تدریج از حالت مخفی به حالت نمایان در بیاید. افکت fadeIn در یک افکت تصویری با زیاد کردن نور عنصر به تدریج باعث نمایان شدن آن می شود .

بدیهی است این افکت بر روی عناصری قابل اجراست که در ابتدا مخفی باشند .

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

کد:

$ ( ” selector ” ).fadeIn ( speed , callback )

selector :selector عنصری است که این افکت باعث نمایان شدن آن می شود .

speed : این پارامتر اختیاری بوده و مقدار پیش فرض آن صفر است .

این پارامتر سرعت نمایان شدن عنصر توسط افکت را تعین می کند .

این پارامتر به دو صورت قابل مقداردهی می باشد .

تعیین به وسیله زمان بر حسب میلی ثانیه : در این حالت مدت زمانی که می خواهید در آن عنصر به تدریج نمایان شود را نعیین می کنید . مثلا ۱۰۰ ms .

تعیین بر اساس ۳ حالت کلی زیر :

در این حالت با انتخاب یکی از ۳ مقدار زیر سرعت نمایان شدن را آرام ، معمولی و یا سریع انتخاب می نمایید .

“slow”

“normal”

“fast”

callback :توسط این پارامتر می توان نام یک تابع را تعیین کنید تا پس از پایان پافتن اجرای افکت و نمایان شدن عنصر مورد نظر ، آن تابع اجرا شود .

به کار بردن این پارامتر اختیاری است . مثال زیر کاربرد افکت fadeIn را نشان میدهد .

کد:

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

با کلیک روی هر button عمل fadein شدن بر روی تگ هایی که ای دی انها div1,div2,dive3 است با سرعت های متفاوت انجام می شود