جستجو برای:
  • صفحه اصلی
  • وبلاگ تخصصی جاوااسکریپت
  • تونل یادگیری رایگان
    • آموزش رایگان جاوااسکریپت (JavaScript)
    • آموزش رایگان جی کوئری
  • دوره ها
    • دوره جاوااسکریپت مقدماتی
    • آموزش کامل عملگرها (Operators)
    • آموزش کامل حلقه ها و دستورات شرطی
    • آموزش کامل Objects (اشیا)
    • آموزش کامل Arrays (آرایه)
    • آموزش کامل Functions (توابع)
    • آموزش پروژه محور جاوااسکریپت
    • آموزش مقدماتی React
  • فیلم های آموزشی
  • حساب کاربری
 
MEGA JS
  • صفحه اصلی
  • وبلاگ تخصصی جاوااسکریپت
    • جاوااسکریپت
    • Angular
    • Nodejs
    • Reactjs
    • Vuejs
    • Electronjs
    • دیتابیس MongoDB
    • کتابخانه های جاوا اسکریپت
    • فریمورک های جاوا اسکریپت
  • تونل یادگیری رایگان
    • آموزش رایگان جاوااسکریپت
      • 1) جاوااسکریپت چیست ؟
      • 2) بارگذاری جاوااسکریپت
      • 3) کامنت گذاشتن در جاوااسکریپت
      • 4) متغیرها در جاوااسکریپت
      • 5) عملگرها در جاوااسکریپت
      • 6) انواع داده در جاوااسکریپت
      • 7) اعداد در جاوااسکریپت
      • 8) رشته ها در جاوااسکریپت
      • 9) متد های رشته در جاوااسکریپت
      • 10) آرایه ها در جاوااسکریپت
      • 11) متدهای آرایه در جاوااسکریپت
      • 12) مرتب سازی آرایه در جاوااسکریپت
      • 13) اشیا در جاوااسکریپت
      • 14) توابع در جاوااسکریپت
      • 15) توابع ریاضی در جاوااسکریپت
      • 16) دستور شرطی if در جاوااسکریپت
      • 17) دستور Switch در جاوااسکریپت
      • 18) آموزش حلقه for در جاوااسکریپت
      • 19) آموزش حلقه while
    • آموزش رایگان جی کوئری
      • 1) جی کوئری چیست ؟
      • 2) نصب جی کوئری
      • 3) سینتکس جی کوئری
      • 4) سلکتورها در جی کوئری
      • 5) رویداد ها در جی کوئری
      • 6) Hide و Show در جی کوئری
      • 7) افکت Fade در جی کوئری
      • 8) افکت Slide در جی کوئری
      • 9) انیمیشن در جی کوئری
      • 10) افکت ها در جی کوئری
      • 11) دسترسی به محتوای تگ ها (Get)
      • 12) ارسال اطلاعات به تگ ها (Set)
    • آموزش های کامل جاوااسکریپت
      • آموزش کامل Operators (عملگرها)
      • آموزش کامل حلقه ها و شرط ها
      • آموزش کامل Objects (اشیا)
      • آموزش کامل Arrays (آرایه ها)
      • آموزش کامل Functions (توایع)
  • دوره ها
    • دوره رایگان جاوااسکریپت
    • دوره رایگان عملگرها (Operators)
    • دوره رایگان شرط ها و حلقه ها
    • دوره رایگان اشیا (Objects)
    • دوره رایگان آرایه ها (Arrays)
    • دوره رایگان توابع (Functions)
    • دوره پروژه محور هیولای جاوااسکریپت
    • دوره رایگان React مقدماتی
  • نقشه راه یادگیری جاوااسکریپت
0

ورود و ثبت نام

9) انیمیشن در جی کوئری (Animation)

17 تیر 1398
ارسال شده توسط محمدرضا حاجی مقصودی
یادگیری جی کوئری
1.55k بازدید

در این بخش از تونل یادگیری جی کوئری با ایجاد افکت انیمیشنی آشنا میشویم. این افکت با اعمال تغییراتی بر روی یک عنصر در صفحه در بخشی از زمان حالت انیمیشنی به آن المان میدهد. برای استفاده از این افکت از تابع ()animate استفاده میکنیم. این تابع سینتکس زیر را دارد

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

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

سرعت در این تابع همان حالت قبل را دارد و تنها سه ورودی fast و slow و زمان برحسب میلی ثانیه را دریافت میکند. مقدار بعد از ان که callback  است دستوراتی است که بعد از انیمیشن اجرا میشوند.

و اما مهم ترین ورودی که {params} است، شامل یک سری از دستورات است که انیمیشن ما آنها را اعمال میکند. به مثال زیر توجه کنید:

$("button").click(function(){
  $("div").animate({left: '250px'});
});

زمانی که بر روی دکمه(button) کلیک کنیم، div موجود در صفحه 150 پیکسل از سمت چپ فاصله میگیرد. این جابجایی در طول زمان تنظیم شده بر روی ورودی speed صورت میگیرد و به صورت انیمیشنی این اتفاق می افتد.

دستکاری چندین ویژگی انیمیشن در جی کوئری

برای این کار تعداد ویژگی ها و مقادیر ثانویه که قصد داریم بر روی عنصر اعمال بشود را به شکل زیر وارد می کنیم:

$("button").click(function(){
  $("div").animate({
    left: '250px',
    opacity: '0.5',
    height: '150px',
    width: '150px'
  });
});

در مدت زمان تنظیم شده این ویژگی ها بر روی سلکتور اعمال میشود.

 

مقدار دهی به صورت نسبی در Jquery

هنگام مقدار دهی به صورت نسبی بر اساس مقدار اولیه ویژگی ای که میخواهیم تغییرات را اعمال کنیم حالت انیمیشنی فعال می شود. به عنوان مثال اگر عنصر ما در صفحه دارای width و hight باشد. با استفاده از مقدار دهی نسبی به میزانی که مشخص کردیم به width  و hight آن اضافه یا کم می شود.

به عنوان مثال:

$("button").click(function(){
  $("div").animate({
    left: '250px',
    height: '+=150px',
    width: '+=150px'
  });
});

استفاده از مقادیر شناخته شده

در این هنگام ما از سه مقدار show و hide و toggle برای تنظیم مقدار ویژگی ها استفاده می کنیم. به عنوان مثال اگر ما مقدار ارتفاع اوله توسط css تعریف کرده باشیم  مقدار hide  پس از اجرای رویداد آن را نادیده میگیرد و اعمال نمیکند. مقدار show  به صورت عکس رفتار میکند و مقدار toggle به صورت دو طرفه انجام میشود. در مثال زیر این موضوع را بهتر متوجه خواهید شد.:

$("button").click(function(){
  $("div").animate({
    height: 'toggle'
  });
});

ایجاد صف در حالت انیمیشنی جی کوئری

تابع animate در جی کوئری این امکان را به ما می دهد تا چند تغییر را پشت سر هم  یکی پس از دیگری بر روی ویژگی های سلکتور خودمان اعمال کنیم. در مثال زیر میتوانید این را مشاهده کنید:

$("button").click(function(){
  var div = $("div");
  div.animate({height: '300px', opacity: '0.4'}, "slow");
  div.animate({width: '300px', opacity: '0.8'}, "slow");
  div.animate({height: '100px', opacity: '0.4'}, "slow");
  div.animate({width: '100px', opacity: '0.8'}, "slow");
});

 

 

 

 

اشتراک گذاری:
برچسب ها: تونل یادگیریجی کوئرییادگیری جی کوئری

مطالب زیر را حتما مطالعه کنید

ارسال اطلاعات به تگ ها در جی کوئری

12) ارسال اطلاعات به تگ ها با جی کوئری (Set)

دسترسی به محتوای html با جی کوئری

11) دسترسی به محتوای تگ ها با جی کوئری

افکت ها در جی کوئری

10) افکت ها در جی کوئری (تکمیلی)

افکت Slide در جی کوئری

8) افکت Slide در جی کوئری

افکت Fade در جی کوئری

7) افکت Fade در جی کوئری

Hide و Show در جی کوئری

6) Hide و Show در جی کوئری

دیدگاهتان را بنویسید لغو پاسخ

جستجو برای:
هیولای جاوااسکریپت

آموزش پروژه محور جاوااسکریپت

آموزش پروژه محور جاوااسکریپت

دسته‌ها
  • Angular
  • Denojs
  • Electronjs
  • Mongo DB
  • Nodejs
  • React
  • Vue
  • ابزار و تکنولوژی
  • جاوااسکریپت
  • فریم ورک ها
  • کتابخانه ها
  • وبلاگ
  • یادگیری React
  • یادگیری جاوااسکریپت
  • یادگیری جی کوئری
جاوااسکریپت را از کجا شروع کنیم؟

نقشه راه یادگیری جاوا اسکریپت

MEGAJS | مگا جی اس

جدیدترین نوشته ها
  • ۲6) تمرین عملگرها: جا به جایی متغیرها با جاوااسکریپت
  • Typescript چیست؟ چرا باید ازش استفاده کنیم؟
  • ۲۵) آموزش اولویت عملگرها در جاوااسکریپت
  • ۲۴) آموزش عملگرهای منطقی در جاوااسکریپت
درباره MEGA JS

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

با عضویت در خبرنامه ما از آخرین آپدیت دوره ها و تخفیف ها با خبر باشید

کانال آپارات

فیلم های آموزشی رایگان در کانال آپارات MEGAJS

کانال آپارات MEGAJS

تمامی حقوق برای سایت MEGA JS محفوظ می باشد.

ورود

آموزش برنامه نویسی
رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت