19
تشکر

نحوه استفاده از Easing در جی کوئری

جی کوئری

جی کوئری

این مطلب در دسته بندی مطالب جی کوئری است. جی کوئری را در اینجا دنبال کنید.

استفاده از easing میتواند به افکت های جی کوئری شما روح تازه ای بدمد. easing با استفاده از تغییر در شتاب و پیشرفت انیمیشن اینکار را انجام میدهد. جی کوئری دو متد easing دارد که شامل linear و swing است. کار با این متدها تقریبا خسته کنند است زمانی که پلاگینی به نام easing.js وجود دارد.

پلاگین easing جی کوئری دارای 30 نوع متد متفاوت است. در این مطلب با آموزش استفاده از این پلاگین پر کاربرد در جی کوئری آشنا میشویم. ابتدا این پلاگین را از اینجا دانلود کنید.

از این متدها فقط میتوان در متد animate استفاده کرد و نمیتوان از آن در متدهایی مانند show, fadeIn و … استفاده کرد.

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

$(this).animate(
    {'margin-left': 1000}, 
    'fast', 
    'swing', 
    function(){
        alert('done');
    }
)

که البته ما برای راحتی کار مانند زیر مینویسیم:

$(this).animate({'margin-left': 1000}, 'fast', 'swing', function(){
    alert('done');
})

روش دوم:

$(this).animate(
    {'margin-left': 1000}, 
    {
        duration: 'fast', 
        easing: 'swing', 
        complete: function(){
            alert('done');
        }
    } 
)

استفاده از پلاگین

استفاده از این پلاگین بسیار ساده است. پس از دانلود فایل jquery.easing.1.3.js آن را به صفحه متصل کنید. و کد زیر  را برای عنصر مورد نظرتان بنویسید.

$('.example1').click(function(){
    $(this).animate({'margin-left': 1000}, 1500, 'easeOutBounce')
    .animate({'margin-left': 5}, 1500, 'easeOutBounce')
 })

در کد بالا ما از متد easeOutBounce استفاده کردیم. شما میتوانید از بیش از 30 متد موجود در این فایل استفاده کنید. واقعا عالی است.

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

این فایل را دانلود کنید.

  • مهدی ربیعی می‌گه:

    آموزشات عالیه
    ای کاش کاملتر هم میشد

  • Masih می‌گه:

    سلام

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


  • نظرات این مطلب بسته است.