آموزش انیمیشن جی کوئری

سرفصل ها و درس ها

انیمیشن جی کوئری jQuery Animation

• مقدمه ای بر انیمیشن جی کوئری Introduction to jQuery Animation

• پیش نیازها و ابزار Prerequisites and Tools

انیمیشن ساده جی کوئری Simple jQuery Animation

• معرفی Introduction

• نمایش، پنهان کردن و تغییر روش ها Show, Hide and Toggle Methods

• روش های محو شدن Fade Methods

• روش های اسلاید Slide Methods

• متد animate(). The animate() Method

• پارامترهای animate(). animate() Parameters

• گزینه های animate(). animate() Options

• انیمیشن های زنجیره ای Chaining Animations

• توقف انیمیشن ها Stopping Animations

• خلاصه Summary

تسهیل Easing

• معرفی Introduction

• تعریف آسان سازی و نمونه ها Easing Definition and Samples

• آسان کردن با jQuery UI Easing with jQuery UI

• یک پلاگین ساده کننده جی کوئری A jQuery Easing Plug-in

• ایجاد توابع تسهیل سفارشی Creating Custom Easing Functions

• خلاصه Summary

انیمیشن پیشرفته جی کوئری Advanced jQuery Animation

• معرفی Introduction

• تبدیل عناصر DOM به صورت دو بعدی Transforming DOM Elements in 2D

• متحرک سازی چرخش های سه بعدی Animating 3D Rotations

• متحرک کردن رنگ ها Animating Colors

• صف های انیمیشن Animation Queues

• وعده هایی برای انیمیشن Promises for Animation

• خلاصه Summary

ایجاد یک دکمه متحرک Creating an Animated Button

• معرفی Introduction

• راه اندازی پروژه Project Setup

• استفاده از فونت عالی برای آیکون ها Using Font Awesome for Icons

• متحرک سازی یک گرادیان شعاعی Animating A Radial Gradient

• متحرک سازی وقایع ورودی و برگ موش Animating mouseenter and mouseleave Events

• متحرک سازی رویداد کلیک Animating The Click Event

• افزودن پاسخ به تماس برای رویداد کلیک Adding A Callback for The Click Event

• خلاصه Summary

ایجاد یک گالری تصاویر متحرک Creating an Animated Picture Gallery

• معرفی Introduction

• راه اندازی پروژه Project Setup

• بارگذاری و نمایش تصاویر Loading and Displaying Images

• ماوس بر روی تصاویر Mousing Over Images

• متحرک کردن تصاویر دور از موش Animating Images Away from The Mouse

• بزرگنمایی روی یک رویداد کلیکی Zooming In on A Click Event

• چرخش و محو شدن تصاویر پس زمینه Background Images Rotate and Fade Away

• رفع مشکلات خاص مرورگر Fixing Browser Specific Problems

• خلاصه Summary

ایجاد یک نمودار دایره متحرک Creating an Animated Pie Chart

• معرفی Introduction

• راه اندازی پروژه Project Setup

• ترسیم نمودار پای Drawing The Pie Chart

• انتخاب یک برش پای Selecting A Pie Slice

• چرخش نمودار پای Rotating The Pie Chart

• اضافه کردن یک ماشین حالت Adding A State Machine

• متحرک سازی قطعه انتخاب شده Animating The Selected Slice

• متحرک سازی عناصر DOM برای انتخاب Animating DOM Elements for The Selection

• خلاصه Summary

ساخت و بهینه سازی یک موتور Sprite ساده Building and Optimizing A Simple Sprite Engine

• معرفی Introduction

• راه اندازی موتور Sprite Setting up The Sprite Engine

• حرکت دادن جن Moving A Sprite

• متحرک سازی 500 جن Animating 500 Sprites

• بررسی کد با نمایه کروم Inspecting The Code with Chrome's Profiler

• بهینه سازی کد ما Optimizing our Code

• خلاصه Summary