آموزش انیمیشن در jquery

نمونه یک
?
۱
۲
۳
۴
۵
۶
۷

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

توجه

در حالت پیش فرض تمامی المان های HTML دارای موقعیت ایستا بوده و امکان به حرکت درآوردن آن ها وجود ندارد. به منظور تنظیم و دستکاری موقعیت آن، ابتدا باید خاصیت position را relative، fixed یا absolute مقداردهی کنید.

متد animate() جی کوئری – دستکاری چندین خاصیت

در نمونه ی زیر خاصیت ها همزمان برای متحرک سازی و اجرای انیمیشن اعمال می شوند:

نمونه دو
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲

$(document).ready(function () {
$(“button”).click(function () {
$(“div”).animate({
left: ‘250px’,
opacity: ‘0.5’,
height: ‘150px’,
width: ‘150px’
});
});
});

آیا امکان دستکاری همه ی خاصیت های CSS با استفاده از متد ()animate وجود دارد؟

تا حدی می توان گفت بله! اما در این میان یک نکته ی قابل توجه وجود دارد: برای استفاده از خاصیت های CSS در متد ()animate باید آنها را با روش نوشتاری Camel-Case نوشت. به طور مثال بجای padding-right از paddingRight و یا بجای margin-left از marginLeft استفاده کرد.
همچنین متحرک سازی براساس رنگ، در هسته کتابخانه jQuery اضافه نشده است.
چنانچه مایلید بر اساس رنگ ها متحرک سازی کنید، باید به سایت jQuery.com مراجعه کرده و افزونه ی مورد نظر را بارگیری کنید.

متحرک سازی در jQuery-استفاده از مقادیر نسبی

این امکان وجود دارد که مقادیر نسبی تعریف کرد، در آن هنگام مقدار تعریف شده نسبت به مقدار جاری المان تنظیم می شود. می توان خاصیت ها را نسبت به مقادیر جاری آن ها، مقداردهی کرد. برای این منظور بایستی در زمان مقداردهی از “=+” یا “=-” استفاده نمایید:

نمونه سه
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱

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

افکت متحرک سازی جی کوئری از قابلیت Queue بهره می گیرد

قابلیت queue به صورت پیش فرض برای کار با انیمیشن در jQuery گنجانده شده است، بدین معنا که به هنگام نوشتن چندین دستور animate() پشت سرهم، jQuery یک صف داخلی برای آن ها ایجاد کرده، سپس آن ها را یکی پس از دیگری صدا می زند. از این رو چنانچه مایلید انیمیشن های مختلفی را به صورت متوالی و یکی بعد از دیگری اجرا کنید، پیشنهاد می کنیم از قابلیت صف در jQuery استفاده کنید:

نمونه چهار
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱

$(document).ready(function () {
$(“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”);
});
});

مثال زیر ابتدا المان را به سمت راست حرکت داده، سپس فونت متن آن را بزرگ می کند:

نمونه پنج
?
۱
۲
۳
۴
۵
۶
۷
۸
۹

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