وب آکادمی

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

جلسه ششم – جلوه های جی کوئری (jQuery)– پویا نمایی

دسته بندی:آموزش کتابخانه jquery تاریخ انتشار: 18 مهر 1397 برچسب ها : برچسب‌ها:, , ,

متد animate() اجازه می دهد تا پویا نمایی دلخواهی ایجاد کنید.

متد animate()

گرامر:

$(selector).animate({params},speed,callback);

پارامترهای اجباری خصوصیات CSS که باید پویا شوند را تعیین می کنند.

پارامتر اختیاری speed مدت زمان اجرای پویا نمایی را تعیین می کند ، و می تواند مقادیر slow  ، fast یا عددی بر حسب میلی ثانیه را بگیرد.

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

مثال زیر یک متد ساده animate() را نشان می دهد که عنصر <div>را به چپ حرکت می دهد تا جایی که خاصیت left آن مساوی 250px شود.

مثال

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

 

بطود پیش فرض، همه عناصر HTML مکان ثابتی دارند، و نمی توانند حرکت کنند. برای تغییر مکان ، باید ابتدا خاصیت position از CSS آنها را به  یکی از مقادیر relative ، fixed یا absolute تنظیم کنید!

 

پویانمایی – دستکاری چند خاصیت

توجه کنید که امکان پویا کردن چندخاصیت بطور همزمان وجود دارد:

مثال

$(“button”).click(function(){
$(“div”).animate({
left:’250px’,
opacity:’0.5′,
height:’150px’,
width:’150px’
});
});
آیا امکان دستکاری همه خصوصیات CSS با تابع animate() هست؟

البته که هست! و اما یک چیز مهم را باید به خاطر بسپارید که خاصیت های دوقسمتی مثل padding-left باید بصورت یک تکه نوشته شده و کلمه دوم با حرف بزرگ شروع شود مثل paddingLeft .

همچنین ، پویانمایی رنگ در کتابخانه هسته jQuery تعبیه نشده است و برای این کار باید از افزونه  Color Animations استفاده کنید.

 

پویانمایی  – استفاده از مقادیر نسبی

امکان استفاده از مقادیر نسبی هم با قرار دادن +=  یا -= در مقابل مقدار وجود دارد:

مثال

$(“button”).click(function(){
$(“div”).animate({
left:’250px’,
height:’+=150px’,
width:’+=150px’
});
});

پویانمایی – استفاده از مقادیر از پیش تعریف شده

هر کدام از خصوصیات را می توانید با show ، hide یا toggle مقدار دهی کنید.

مثال

$(“button”).click(function(){
$(“div”).animate({
height:’toggle’
});
});

پویانمایی – استفاده از صف های عملکرد

به طور پیش فرض جی کوئری (jQuery)استفاده از صف عملکرد را برای پویا نمایی پشتیبانی می کند.

به این معنی که می توانید چندین فراخوانی از animate() را بصورت پشت سر هم داشته باشید که در این صورت یک صف داخلی ایجاد شده  و متدها یکی یکی فراخوانی خواهند شد.

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

مثال 1

$(“button”).click(function(){
var div=$(“div”);
div.animate({height:’300px’,opacity:’0.4′},”slow”);
div.animate({width:’300px’,opacity:’0.8′},”slow”);
div.animate({height:’100px’,opacity:’0.4′},”slow”);
div.animate({width:’100px’,opacity:’0.8′},”slow”);
});

 

مثال زیر ابتدا عنصر <div> را به سمت چپ حرکت می دهد، سپس اندازه متن آن را افزایش می دهد:

مثال 2

$(“button”).click(function(){
var div=$(“div”);
div.animate({left:’100px’},”slow”);
div.animate({fontSize:’3em’},”slow”);
});

دیدگاهتان را بنویسید

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

شانزده − نه =