افکت ( ) animate در jQuery
در این بخش از آموزش jquery ، افکت animate را در طراحی سایت آموزش می دهیم.
افکت animate بوسیله تغییر یک یا چند خاصیت CSS عنصر مورد نظر از یک حالت اولیه به مقداری جدید یک عمل انیمیشن را انجام می دهد . مقدار خاصیت یا خاصیت های CSS تعیین شده برای تغییر در عنصر مورد نظر توسط یک افکت ( ) animate بصورت آهسته از مقدار اولیه به مقدار ثانویه تغییر می کنند که باعث ایجاد یک حالت انیمیشن می شود .
فرض کنید یک تگ div به رنگ پس زمینه سبز دارید . مقدار خاصیت height ( ارتفاع ) آن در حالت اولیه px 100 است . می خواهید بوسیله خاصیت ( ) animate مقدار ارتفاع آن را به px 300 افزایش دهید . در هنگام اجرای ( ) animate ارتفاع عنصر به صورت آهسته از 100 به 300 افزایش می یابد و باعث ایجاد یک افکت تصویری می شود .
افکت ( ) animate فقط با خواص CSS ای که مقادیر آنها عددی است مثل (Height : 30 px ) کار می کند و نمی تواند آن را با خواصی که مقدار رشته ای دارند مثل ( background-color:red ) به کار ببرید .
شکل کلی استفاده از این افکت بصورت زیر است :
( selector ).animate ( {styles} , speed , easing , callback ) ;
مثال زیر کاربردافکت animate را نشان میدهد:
$("button").click(function(){
$("div").animate({left:'250px'});
});
هرگاه روی دکمه ای از نوع button کلیک کردیم جلوه انیمیشن روی محتویات تگ div انجام شود و ...