keyboard_return  چسبون مقالات آموزشی افکت ها در جی کوئری jQuery Effect
  1. افکت ها در جی کوئری jQuery Effect

افکت ها در جی کوئری

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

jquery effects

افکت ()Hide

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

مثال:

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

وقتی با استفاده از متد hide در جی کوئری یک عنصر را مخفی می کنید، در واقع جی کوئری مشخصه display آن عنصر را در css برابر با none می کند. در این صورت طول و عرض عنصر مورد نظر برابر با صفر خواهد شد که دیگر در صفحه فضایی را اشغال نمیکند و قابل رویت نخواهد بود.

افکت ()show

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

نحوه فراخوانی و مقداردهی به متدهای hide و show

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

پارامتر speed اختیاری بوده و سرعت مخفی شدن و یا ظاهر شدن یک عنصر را مشخص می کند. این پارامتر مقادیر "fast"، "normal"، "slow" و یا مقداری بر حسب میلی ثانیه دریافت می کند.

مثال:

$("button").click(function() {
    $("p").hide(1000);
});

در صورتیکه کاربر روی عنصری که خاصیت type آن button تعیین شده است، کلیک کند تمام تگ های P موجود در صفحه در زمان ۱۰۰۰ میلی ثانیه (معادل یک ثانیه) محو خواهند شد.

پارامتر اختیاری callback نیز یک تابع می باشد. این تابع پس از اینکه افکت مورد نظر ۱۰۰ % کامل شد، اجرا خواهد شد.

jQuery callback

دستورات جی کوئری به صورت خط به خط اجرا می شوند. هنگامی که شما یک افکت را فراخوانی کنید ممکن است قبل از اینکه افکت مورد نظر به پایان برسد دستور خط بعدی اجرا شود.

مثال:

$("button").click(function() {
    $("p").hide(1000);
    alert("پاراگراف مورد نظر مخفی شد");
});

در مثال فوق به دلیل اینکه مخفی شدن پاراگراف به ۱۰۰۰ میلی ثانیه زمان نیاز دارد، دستور alert قبل از اینکه پاراگراف مورد نظر مخفی شود، نمایش داده می شود.

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

مثال:

$("button").click(function() {
    $("p").hide("slow", function() {
        alert("پاراگراف مورد نظر مخفی شد");
    });
});

افکت ()toggle

با استفاده از متد toggle می توانید بین متد های hide و show تغییر وضعیت دهید. یعنی وقتی کاربر روی عنصر مورد نظر کلیک کند تابع فراخوانی شده وعنصر مورد نظر مخفی شود و در صورتیکه مجددا این تابع فراخوانی شود عنصر مورد نظر نمایان خواهد شد.

مثال:

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

نحوه استفاده از متد toggle

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

پارامتر speed اختیاری بوده و سرعت مخفی شدن و یا ظاهر شدن یک عنصر را مشخص می کند. این پارامتر مقادیر "fast"، "normal"، "slow" و یا مقداری بر حسب میلی ثانیه دریافت می کند همچنین از پارامتر callback نیز می توانید برای اطمینان از اجرای کدهای بعدی پس از اتمام کامل افکت مورد نظر استفاده کنید.

مشاهده قسمت های قبلی:

قسمت اول: معرفی جی کوئری

قسمت دوم: شروع کار با جی کوئری

قسمت سوم: ساختار دستورات و انتخابگر ها در jQuery

قسمت چهارم: رویداد ها در جی کوئری

چسبون مجله آموزشی طراحی و برنامه نویسی وب

افکت ها در جی کوئری jQuery Effect - 4.2 از 5 بر اساس 150 رای

امتیاز کاربران

افکت ها در جی کوئری jQuery Effect
دیدگاه‌ها

دیدگاهی وجود ندارد

2024 © Copyright کليه حقوق مادی و معنوی براي چسبون محفوظ است و هرگونه کپی برداری پیگرد قانونی دارد.