انیمیشن در جی کوئری

آموزش وب ، jquery ، مرجع ،
118 بازدید
انیمیشن در جی کوئری
تابع ایجاد انیمیشن در جی کوئری و تغییر حالت های مختلف اشیا صفحه

در مطلب قبلی متدی از جی کوئری معرفی کردم به نام animate. کار این تابع در جی کوئری ایجاد انیمیشن بر روی ویژگی های سی اس اس است. در مطلب قبلی گفته بودم که امکان ایجاد انیمیشن بر روی تمام ویژگی های Css با استفاده از این تابع نیست. اما نگفتم که چه توابعی امکان انیمیشنی شدن را دارند. امروز در این مطلب می خواهم مواردی که امکان استفاده از انیمیشن را دارند بگذارم.

شکل کلی تابع animate

<<<code>>>

$(selector).animate( { "cssProperty":value , ... }, animationTime ); // time is in milisecond

<<</code>>>

مواردی که در تابع animate قابل استفاده هستند

  • backgroundPositionX: موقعیت X پس زمینه
  • backgroundPositionY: موقعیت Y پس زمینه
  • borderWidth: زخامت خط حاشیه
  • borderBottomWidth: زخامت خط حاشیه پایینی
  • borderLeftWidth: زخامت خط حاشیه چپی
  • borderRightWidth: زخامت خط حاشیه راستی
  • borderTopWidth: زخامت خط حاشیه بالایی
  • borderSpacing: فضای خط حاشیه
  • margin: فاصله ی شی از اشیا بیرونی
  • marginBottom: فاصله از پایین
  • marginLeft: فاصله از چپ
  • marginRight: فاصله از راست
  • marginTop: فاصله از بالا
  • outlineWidth: زخامت خط بیرونی
  • padding: فاصله ی شی از اشیا درونی
  • paddingBottom: فاصله از پایین
  • paddingLeft: فاصله از چپ
  • paddingRight: فاصله از راست
  • paddingTop: فاصله از بالا
  • height: ارتفاع شی
  • width: طول شی
  • maxHeight: بیشینه ی ارتفاع
  • maxWidth: بیشینه ی طول
  • minHeight: کمینه ی ارتفاع
  • minWidth: کمینه ی طول
  • fontSize: اندازه ی فونت
  • bottom: پایین
  • left: چپ
  • right: راست
  • top: بالا
  • letterSpacing: فاصله ی حروف متن
  • wordSpacing: فاصله ی واژه های متن
  • lineHeight: فاصله ی خطوط متن
  • textIndent: فاصله ی ابتدای بند های متن

مثالی از استفاده از تابع animate

رمز تمام فایل های فشرده
رمز فایل فشرده است.