۱۵ نکته و ترفند جی کوئری – بخش چهارم
15 نکته و ترفند جی کوئری - بخش چهارم : در این مقاله، درباره CSS Hooks و توابع سفارشی easing برای ایجاد انیمیشن های جی کوئری صحبت خواهیم کرد.

با سلام. در مقالات قبل در زمینه سری آموزشی نکات و ترفندهای جی کوئری ، ۶ مورد از این ترفندها را بیان کردیم. در این مقاله، موارد دیگری را مطرح خواهیم کرد.

 

۷- استفاده از هوک های CSS (Use CSS Hooks):

css Hooks

هوک های css (Css Hooks) به این منظور معرفی شده اند تا به برنامه نویسان و توسعه دهندگان، امکان get و set کردن مقادیر خاص css را بدهد. توسط این امکان، شما می توانید تعریف پیش فرض مرورگرها از استایل ها را مانند border-radius تغییر دهید و کاملا شخصی سازی کنید:

 
 $.cssHooks['borderRadius'] = {
        get: function(elem, computed, extra){
            // Depending on the browser, read the value of
            // -moz-border-radius, -webkit-border-radius or border-radius
        },
        set: function(elem, value){
            // Set the appropriate CSS3 property
        }
};
// Use it without worrying which property the browser actually understands:
$('#rect').css('borderRadius',5);

نکته جالب هوک های CSS اینست که عده ای از برنامه نویسان، هوک هایی را نوشته اند و شما می توانید با مراجعه به وب سایت github آنها را بصورت رایگان در پروژه های بعدی خود استفاده نمائید.

 

۸- استفاده از توابع سفارشی easing (Custom Easing Functions):

easings animation

 

حتما شما تابحال با پلاگین easing جی کوئری برخورد داشته اید. این پلاگین به شما این امکان را می دهد تا به انیمیشن های موجود، افکت بدهید. برای استفاده از این پلاگین فقط کافیست یک فایل جاوااسکریپت دیگر بنام easing.min.js را به صفحه وب سایت خود اضافه نمائید. علاوه بر دانلود این فایل و استفاده از آن، شما می توانید از CDN این پلاگین نیز استفاده کنید:

https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js

پس از افزودن رفرنس این پلاگین به صفحه وب، دستوراتی مانند زیر را در نظر بگیرید:

 
$.easing.easeInOutQuad = function (x, t, b, c, d) {
    if ((t/=d/2) < 1) return c/2*t*t + b;
    return -c/2 * ((--t)*(t-2) - 1) + b;
};
// To use it:
$('#elem').animate({width:200},'slow','easeInOutQuad');

شما همچنین می توانید انواع easing ها را در وب سایت easings.net مشاهده کنید.

در مقاله بعد، درباره تابع proxy و تعداد المان های DOM صفحه وب صحبت خواهیم نمود.


برچسب‌ها:

css hookseasingeasing animationاموزش جی کوئریانیمیشن جی کوئری

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

11 − شش =