دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)



  • ۲۶
  • آبان

جلسه ۱۰ : پویا نمایی یا کار با Animation در jQuery

  • دسته‌بندی‌ها :
جلسه ۱۰ : پویا نمایی یا کار با Animation در jQuery
    • جزئیات
    • نوع محتواآموزش تصویری

      مقدمه

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

      در جلسات اخیر، با افکت های ابتدایی و سادتری آشنا شدید. که هر کدام در جای خود، کاربرد زیادی داشت. از جمله می توان به محو شدن در jQuery و در ادامه آن به مبحث Sliding در jQuery نیز. اشاره کرد.

      اکنون به سراغ موضوع اصلی بخش ، پویا نمایی یا کار با Animation در jQuery ،می رویم.

       

      پویا نمایی یا کار با Animation در jQuery

      پویا نمایی یا کار با Animation در jQuery

       

      پویا نمایی یا کار با Animation در jQuery

      در jQuery ، با استفاده از تابع ()animate ، می توانید. انیمیشن های سفارشی بسازید.

      تابع ()animate

      از تابع ()animate ، برای ایجاد انیمیشن روی عناصر html ، صفحه وب ، استفاده می شود.

      ساختار:

      مثال : 

      Params ، پارامترهای مورد نیاز خواص CSS ، را در بر می گیرد..

      پارامتر اختیاری speed سرعت اجرای افکت انیمیشن ، را مشخص می کند. و می تواند مقادیر زیر را داشته باشد: “slow”، “fast” یا بر حسب میلی ثانیه.

      پارامتر callback ، بخش اختیاری یک تابع است. که پس از تکمیل افکت انیمیشن ، روی یک عنصر، اجرا می شود.

      مثال زیر عملکرد تابع ()animate ، را نمایش می دهد. به این صورت که عنصر <div> را به سمت راست، حرکت می دهد. تا زمانیکه صفت left (فاصله از سمت چپ) ، این عنصر به مقدار ۲۵۰px ، برسد:

      مثال : 

      دستکاری چند خصوصیت عناصر در یک تابع ()animate

      در مثال زیر نشان می دهد که چگونه با استفاده از ()animate ، چندیدن خصوصیت از یک عنصر را، تغییر دهید:

      مثال : 

      دستکاری عناصر با مقادیر نسبی

      با تابع ()animate ، می توانید، خصوصیات عناصر را ، بصورت نسبی (با استفاده از اعمالی مانند =+ یا =-) تغییر بدهید.

      مثال:

      مثال : 

      استفاده از افکت های دیگر در تابع ()animate

      شما حتی می توانید از افکت های “show” ، “hide” و “toggle” ، نیز استفاده کنید.

      مثال:

      مثال : 

      استفاده از عملکردهای صف

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

      مثال:

      مثال : 

      مثال ۲:

      مثال : 

      کلام آخر

      خب در این بخش از دوره نیز ، با یک افکت جالب و پرکاربرد، که در واقع در برگیرنده سایر افکت هاست، در قالب موضوع بخش ، پویا نمایی یا کار با Animation در jQuery   آشنا شدید. امیدواریم که این آموزش نیز مورد توجه و استفاده ی ، کاربران گرامی ، قرار گرفته باشد.

      QR:  جلسه ۱۰ : پویا نمایی یا کار با Animation در jQuery
      به اشتراک بگذارید