متد animate در جی کوئری

علیرضا حاتمی نیا 783

سلام مجدد خدمت شما کاربر محترم وبسایت ilikephp و علاقه مندان به آموزش جی کوئری. من علیرضا حاتمی نیا هستم و با قسمتی دیگر از آموزش جی کوئری در خدمت شما هستم. در جلسه قبل با متدها افکت Slide در جی کوئری آشنا شدیم و در این جلسه به آموزش متحرک سازی یا انیمیشن در جی کوئری می پردازیم. پس با ما همراه باشید.

متحرک سازی یا انیمیشن در جی کوئری

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

متد animate() در جی کوئری

متد animate در جی کوری این امکان را به شما می دهد تا به صورت آسان و دستی در صفحه وب انیمیشن ایجاد کنید. همانطور که می دانید عناصر html به صورت استاتیک و ثابت در صفحه هستند و حر کت نمی کنند و برای متجرکت سازی عناصر لازم است تا مکان آنها را با استفاده از خصوصیت position دستکاری کنید. ولی با استفاده از متد animate می توانید به راحتی متحرک سازی عناصر را به صورت انیمیشن انجام دهید.

نگارش کلی متد animate به شکل زیر است:

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

متد animate سه پارامتر به شرح زیر دریافت می کند:
params : این پارامتر اجباری می باشد و مقدار آن برابر با خصوصیت یا خصوصیات Css جهت متحرک سازی می باشد. خصوصیات css بین دو کاراکتر {} قرار می گیرند و مقدارآم ها نیز بین دو کوتیشن قارر می گیرد.

{left : '200px'}

speed: این پارامتر اختیاری می باشد و مقدار آن جهت تعیین سرعت متحرک سازی مشخص می شود. این مقادیر یا کلمات کلیدی slow و fast است و یا عددی به میلی ثانیه. (مثلا 5000 میلی ثانیه که برابر 5 ثانیه است)
callback: این پارامتر اختیاری است و مقدار آن تابعی است که بعد از اجرای کامل animate اجرا می شود.
مثال: در مثال زیر بعد از فشردن دکمه button تگ p به صورت انیمیشن از سمت چپ 400 پیکسل به راست منتقل می شود. به بیان ساده تر اجرای استایل left=400px را به صورت انیمیشن اجرا می کند. البته توجه داشته باشید که خصوصیت position این تگ برابر absolute است.
تگ html:

<button>button</button>
    <p>
        this is an example to show<br>
         animate methodes in jquery
    </p>

خصوصیات css:

p {
            background: red;
            color: white;
            width: 100px;
            position: absolute;
        }

کدهای جی کوئری:

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

نکته مهم : جی کوئری تقریبا تمامی خصوصیات css را در متد animate پشتیبانی می کند. نکته ای که باید به آن توجه داشته باشید این است که بعضی از خصوصیات css که دوحرفی یا بیشتر هستند و با کاراکتر "-" از هم جدا میشوند را بایستی به صورت camel-case بنویسید. مثلا padding-left را باید به صورت paddingLeft بنویسید.

$("button").click(function(){
    $("p").animate({paddingLeft: '100px'});
});

استفاده بیش از یک خصوصیت css در animate

همچینین در animate می توانید بیش از یک خصوصیت css را بنویسید. برای این کار کافیست تا خصوصیات css را با یک کاراکتر کاما "," از هم جدا کنید.

$("button").click(function(){                
$("p").animate({
        left: '400px',
        paddingLeft:'200px',
        opacity: '0.7',
        height: '250px',
        width: '50px'
     });
});

مقدار دهی نسبی خصوصیات css در متد animate

همچنین می توانید خصوصیات css در متد animate را نسبت به مقدار فعلی مقداردهی کنید. برای این منظور از عملگرهای += یا -=  استفاده می کنیم.

$("button").click(function(){
     $("p").animate({
          left:'400px',
          height:'+=200px',
          width:'-=50px'
                
       });
});

استفاده از مقادیر پیشفرض جی کوئری برای خصوصیات css در متد animate

جی کوئری این امکان را برای شما فراهم کرده تا از مقادیری چون show,hide,toggle برای خصوصیات css در متد Animate استفاده کنید:

$("button").click(function(){
      $("p").animate({
          left: '400px',
          paddingLeft:'200px',
          opacity: '0.7',
          height: 'toggle',
          width: 'hide'        
       });
});

استفاده از چند animate برای یک عنصر

همچنین می توانید برای یک عنصر یک صف از چند Animate مختلف ایجاد کنید. جی کوئری یکی پس از دیگر animate ها را اجرا می کند. در این صورت شما می توانید بلافاصله پس از اجرای یک animate، متد animate بعدی را اجرا کنید و الی آخر:
در مثال زیر ابتدا عنصر p به سرعت 400 پیکسل به سمت راست حرکت می کند و سپس ارتفاع آن 300 پیکسل به آرامی slow افزایش میابد.

 

کلمات کلیدی

لینک های مرتبط

طراحی سایت اصفهان
علیرضا حاتمی نیا
طراح و برنامه نویس وب
طراحی وبسایت های واکنش گرا
طراحی و پیاده سازی سیستم مدیریت محتوا
سئو و بهینه سازی سایت