به نام خدا

📌 بررسی ساختار و افکت animate() در jQuery

1. معرفی متد animate()

• متد animate() برای ایجاد انیمیشن سفارشی روی ویژگی‌های CSS استفاده میشه.
• فقط روی ویژگی‌های عددی کار می‌کنه (مثل width، height، opacity، top، left و...).

• ویژگی‌های دارای خط تیره (مثل border-radius) باید به صورت camelCase نوشته بشن:

  javascript

  CopyEdit

  border-radius ❌   borderRadius ✅

2. ساختار کلی

javascript

CopyEdit

$(selector).animate({ cssProperty: value }, duration, easing, callback);

• cssProperty → ویژگی CSS که میخوای تغییر کنه.
• value → مقدار نهایی ویژگی (معمولا همراه px یا واحد مناسب).
• duration → مدت زمان انیمیشن (بر حسب میلی‌ثانیه یا مقادیر "slow" و "fast").
• easing → نوع حرکت (معمولا "swing" یا "linear").
• callback → تابعی که بعد از پایان انیمیشن اجرا میشه.

3. مثال ساده

javascript

CopyEdit

$(".box").animate({ width: "200px", height: "150px" }, 1000);

4. اجرای چند انیمیشن پشت سر هم (Queue)

javascript

CopyEdit

$(".box")  .animate({ width: "200px" }, 1000)  .animate({ height: "100px" }, 1000)  .animate({ top: "100px" }, 1000)  .animate({ right: "100px" }, 1000);

• هر .animate() بعد از تمام شدن قبلی اجرا میشه.

5. نکات مهم

• ویژگی‌هایی مثل boxShadow با جی‌کوئری پیش‌فرض انیمیت نمیشن و برای این کار باید از jQuery UI یا پلاگین استفاده بشه.

• میشه از مقادیر نسبی هم استفاده کرد:

  javascript

  CopyEdit

  $(".box").animate({ height: "+=50px" });

• میشه از توابع callback برای اجرای کار بعد از انیمیشن استفاده کرد.

📌 تعریف متغیرها در jQuery

1. ساختار تعریف متغیر

در جاوااسکریپت (و جی‌کوئری) برای تعریف متغیر از:

• var
• let
• const
  استفاده میشه.

2. مثال

javascript

CopyEdit

var box = $(".box"); // ذخیره المنت در متغیر box.animate({ width: "200px" }, 1000);

3. مزایای استفاده از متغیر

• کد خواناتر و کوتاه‌تر میشه.
• باعث بهینه‌سازی سرعت میشه چون المنت فقط یکبار جستجو میشه.
• راحت‌تر میشه تغییرات بعدی رو روی همون متغیر اعمال کرد.