آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش انیمیشن در 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 برایتان مفید و مناسب بوده باشد.
در صورت داشتن هر گونه سوال، پیشنهاد و یا انتقاد حتماً از قسمت نظرات در پایین صفحه آن را برای ما ارسال کنید.

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

از اینجا بهترین کتابهای برنامه نویسی را دریافت کنید : کتاب های آموزش برنامه نویسی


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

  • 3211
  •    2206
  • تاریخ ارسال :   1394/07/29

دانلود PDF دانلود سورس کد دانلود فیلم آموزشی دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
آموزش انیمیشن در jquery
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .