سبد خرید
0
No products in the cart.

دستور animate در jQuery

دستور animate در jQuery

افکت () animate در جی کوئری

در این پست به بررسی افکت animate در jQuery می پردازیم .

این دستور برای ایجاد تغییرات در css می باشد اما توسط جی کوئری . در واقع تغییر وضعیتی با حالت انیمیشنی است. بطور مثال برای افزایش طول یک المان می توانیم از آن استفاده کنیم البته کاربرد های بسیاری دارد که یکی از مهمترین کاربرد های آن در طراحی اسکرول اسلایدر ها است .جی‌کوئری به توسعه دهندگان این اختیار را می‌دهد که برنامه‌های سطحِ پایینِ مبادله‌ای (ارتباط مرورگر با کاربر) یا انیمیشنی و حتی افکت‌های پیشرفته و سطح بالا و اشیاء فرضی را ایجاد کنند. به‌کارگیری همهٔ این اجزای جی‌کوئری کمک می‌کند تا صفحات وب قدرتمند و داینامیک (پویا)، راحت‌تر ایجاد شوند.

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

;(selector).animate({params},speed,callback)$

برای درک بهتر این افکت چند مثال از آن را در این قسمت بیان میکنیم :

۱٫ در این مثال با استفاده از دستور () animate یک المان را ۱۰۰ پیکسل به چپ منتقل کرده سپس سایز فونت آن را تغییر می دهیم .

 

دستور animate در jQuery

۲ . یک نکته مهم این است که جی کوئری به صورت پیش فرض دستوراتی که پشت سر هم قرار گیرند را به ترتیب و یک به یک بصورت انیمیشنی اجرا می کند  به نمونه کد زیر دقت کنید :

دستور animate در jQuery

افکت animate بسیار پر کاربرد و مهم است و برای استفاده از آن نیاز به تمرین خواهید داشت به همین منظور برای تمرین می توانید به این وبسایت مراجعه فرمایید که در انتهای صفحه بخش تمرینات برای کاربران قرار گرفته است . 

نمونه هایی از استایل هایی که توسط دستور animate در jQuery می توان از آنها استفاده کرد در زیر آورده شده است :

  • backgroundPositionX
  • backgroundPositionY
  • borderWidth
  • borderBottomWidth
  • borderLeftWidth
  • borderRightWidth
  • borderTopWidth
  • borderSpacing
  • margin
  • marginBottom
  • marginLeft
  • marginRight
  • marginTop
  • opacity
  • outlineWidth
  • padding
  • paddingBottom
  • paddingLeft
  • paddingRight
  • paddingTop
  • height
  • width
  • maxHeight
  • maxWidth
  • minHeight
  • minWidth
  • fontSize
  • bottom
  • left
  • right
  • top
  • letterSpacing
  • wordSpacing
  • lineHeight
  • textIndent

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

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

توسط
تومان