سوالاتی درمورد جی کوعری

جامعه‌ها وبلاگ شروع یادگیری برنامه نویسی

سلام. خسته نباشید. یه سری سوالاتی داشتم که ممنون میشم پاسخ بدید. این کد پایین:

لاین اول چرا بعد از پارانتز از {} استفاده شد؟ و این لاین چیکار میکنه؟

توی لاین دوم و هفتم چه اتفاقی افتاد؟

$({countNum:$this.text()}).animate({
            countNum:countTo,
        },{
            duration:1800,
            easing:'linear',
            step:function(){
                $this.text(Math.floor(this.countNum))
            },
            complete: function(){
                $this.text(this.countNum)
            },
        });

سلام،

لاین اول:

$({countNum: $this.text()})

اینجا که تابع animate استفاده شده، این تابع کارش اینه که تغییرات رو به صورت انیمیشن‌وار (یعنی با یه حرکت نرم و تدریجی) انجام بده. این تابع چند تا پارامتر می‌گیره.

اولین پارامترش، یه شیء (Object) هست که داخلش مشخص می‌کنیم چه چیزی باید تغییر کنه. توی این کد، countNum رو داریم که مقدارش از عدد فعلی (که همون متن توی عنصر HTML هست) شروع می‌کنه و به سمت countTo (عدد نهایی) حرکت می‌کنه.

پس این شیء‌ای که توی پارامتر اول دادیم، به تابع animate می‌گه: "برو مقدار countNum رو از عدد فعلیش به عدد countTo برسون و این کارو با انیمیشن انجام بده."

بعدش پارامتر دوم (که اونم یه شیء دیگه‌ست)، تنظیمات بیشتر برای این انیمیشنه. مثلاً اینکه چقدر طول بکشه (duration)، چه نوع حرکت (easing) داشته باشه و توی هر مرحله (step) یا وقتی کامل شد (complete) چه کاری انجام بده.

لاین دوم:

.animate({
    countNum: countTo,

اینجا animate داره شروع می‌کنه به کار. animate یه تابعه که توی jQuery استفاده می‌شه برای انیمیشن دادن به تغییرات. این تابع چند تا پارامتر می‌گیره. اولین پارامترش یه Object هست که مشخص می‌کنه چه چیزی باید انیمیت بشه. مثلاً اینجا countNum باید از مقدار اولیه‌اش به سمت countTo حرکت کنه.

لاین هفتم:

step: function() {
    $this.text(Math.floor(this.countNum))
},

این بخش میاد و توی هر مرحله از انیمیشن، مقدار countNum رو می‌گیره، گردش می‌کنه به سمت پایین (با Math.floor) و همون رو به عنوان متن جدید توی عنصر HTML نشون می‌ده. یعنی متن عدد به عدد عوض می‌شه تا به عدد نهایی برسه.

در کل، این کد داره یه شمارنده رو به صورت انیمیشن نمایش می‌ده و هر بار عدد متن عنصر HTML رو تغییر می‌ده تا به عدد هدف برسه.

تمام این توضیحات و ساختار توابع مثل animate و چیزهایی که استفاده می‌شه رو می‌تونی توی سایت مرجع jQuery به طور کامل ببینی و بیشتر باهاشون آشنا بشی.

بهترین پاسخ

محسن موحد ۲۵ مرداد ۱۴۰۳، ۲۰:۱۹