وباکا

آموزش تخصصی برنامه نویسی وب
حساب کاربری

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

متد 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”);
});

مطالب مرتبط

چگونه با استفاده از سی شارپ یک سرویس ویندوز ایجاد کنیم؟
ساخت رابط كاربر گرافيكي(gui) در نت بينز
آموزش ساخت یک برنامه وب پیش رونده(pwa)
استفاده از  JSON در برنامه نویسی اندروید

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

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

نوشته های مرتبط

جلسه هفتم- آموزش گرفتن و تنظیم کلاس های CSS در جی کوئری

جلسه هشتم- لیست انتخابگرها در جی کوئری

جلسه نهم- آموزش طراحی اسلایدر با کمک جی کوئری

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

جلسه دوم- آموزش گرامر جی کوئری(jQuery)

جلسه سوم – جلوه های نمایش و مخفی کردن در جی کوئری

جلسه چهارم – جلوه های جی کوئری،Fading یا محو کردن

جلسه پنجم – جلوه های جی کوئری، اسلاید کردن

جلسه اول-معرفی و آموزش نصب جی کوئری (jQuery)

فهرست مطالب

وباکا

وباکا همان کدنویسان است که از سال 1395 آغاز به کار کرده و طی این سال ها مطالب و فیلم های آموزشی کاربردی و مفیدی را به جامعه طراحان و برنامه نویسان ارائه کرده است.

تماس با ما

آدرس: بیرجند، خیابان غفاری، پیروزی 9، پلاک 28

شماره تماس: 09151604068

پست الکترونیکی:

mohammadi.sm@gmail.com

شبکه های اجتماعی

Telegram Twitter Youtube Instagram

کلیه حقوق متعلق به آکادمی وب می باشد. کپی برداری از مطالب با ذکر منبع آزاد است.