دوره جامع و پروژه‌محور طراحی وب با تمرکز روی JavaScript، Ajax و API! با طراحی ریسپانسیو و پروژه‌های حرفه‌ای مثل دیجی‌کالا و شمرون کباب مهارتت رو حرفه‌ای کن!
مشاهده بیشتر
این دوره شما رو از مفاهیم پایه تا مباحث پیشرفته مثل JavaScript، React و Next.js پیش می‌بره. با آموزش پروژه‌محور، یک فروشگاه اینترنتی کامل طراحی می‌کنید و برای ورود به بازار کار آماده می‌شید!
مشاهده بیشترمشخصات مقاله
-
4157
-
0.0
-
7889
-
0
-
0
آموزش انیمیشن در jquery
متحرک سازی (animation) در jQuery
متد animate() در jquery به ما این امکان را می دهد که المان های HTML را در صفحه به حرکت درآوریم.
$(selector).animate({params},speed,callback);
پارامتر الزامی params آن دسته از خواص (property) CSS که می خواهید animation (متحرک سازی) بر روی آن ها پیاده شوند را تعریف می کند یک یا چندین خاصیت دلخواه CSS برای متحرک سازی مشخص می کند.
پارامتر اختیاری speed سرعت حرکت یا اجرای ایفکت انیمیشن را تعیین می کند و می توان آن را با مقادیر "slow"، "fast" و میلی ثانیه مقداردهی کرد.
در مثال زیر با استفاده از متد ()animate یک المان <div> را به سمت راست به حرکت در می آوریم تا خاصیت left آن برابر با "250px" تنظیم شود:
در حالت پیش فرض تمامی المان های HTML دارای موقعیت ایستا بوده و امکان به حرکت درآوردن آن ها وجود ندارد. به منظور تنظیم و دستکاری موقعیت آن، ابتدا باید خاصیت position را relative، fixed یا absolute مقداردهی کنید.
متد ()animate جی کوئری – دستکاری چندین خاصیت
در نمونه ی زیر خاصیت ها همزمان برای متحرک سازی و اجرای انیمیشن اعمال می شوند:
آیا امکان دستکاری همه ی خاصیت های CSS با استفاده از متد ()animate وجود دارد؟
تا حدی می توان گفت بله! اما در این میان یک نکته ی قابل توجه وجود دارد: برای استفاده از خاصیت های CSS در متد ()animate باید آنها را با روش نوشتاری Camel-Case نوشت. به طور مثال بجای padding-right از paddingRight و یا بجای margin-left از marginLeft استفاده کرد.
همچنین متحرک سازی براساس رنگ، در هسته کتابخانه jQuery اضافه نشده است.
چنانچه مایلید بر اساس رنگ ها متحرک سازی کنید، باید به سایت jQuery.com مراجعه کرده و افزونه ی مورد نظر را بارگیری کنید.
متحرک سازی در jQuery-استفاده از مقادیر نسبی
این امکان وجود دارد که مقادیر نسبی تعریف کرد، در آن هنگام مقدار تعریف شده نسبت به مقدار جاری المان تنظیم می شود. می توان خاصیت ها را نسبت به مقادیر جاری آن ها، مقداردهی کرد. برای این منظور بایستی در زمان مقداردهی از "=+" یا "=-" استفاده نمایید:
افکت متحرک سازی جی کوئری از قابلیت Queue بهره می گیرد
قابلیت queue به صورت پیش فرض برای کار با انیمیشن در jQuery گنجانده شده است، بدین معنا که به هنگام نوشتن چندین دستور ()animate پشت سرهم، jQuery یک صف داخلی برای آن ها ایجاد کرده، سپس آن ها را یکی پس از دیگری صدا می زند. از این رو چنانچه مایلید انیمیشن های مختلفی را به صورت متوالی و یکی بعد از دیگری اجرا کنید، پیشنهاد می کنیم از قابلیت صف در jQuery استفاده کنید:
مثال زیر ابتدا المان را به سمت راست حرکت داده، سپس فونت متن آن را بزرگ می کند:
امیدواریم که این مطلب در مورد آموزش Jquery و JavaScript برایتان مفید و مناسب بوده باشد.
در صورت داشتن هر گونه سوال، پیشنهاد و یا انتقاد حتماً از قسمت نظرات در پایین صفحه آن را برای ما ارسال کنید.
اگر تمایل دارید به سایر محتوای آموزش برنامه نویسی دسترسی پیدا کنید می توانید به آموزش های گام به گام برنامه نویسی مراجعه کنید.
از اینجا بهترین کتابهای برنامه نویسی را دریافت کنید : کتاب های آموزش برنامه نویسی
کلیه حقوق مادی و معنوی این مقاله متعلق به آموزشگاه تحلیل داده بوده و هر گونه استفاده غیر قانونی از آن پیگرد قانونی دارد.