سبد خرید (0)

تبلیغات

متحرک سازی در jQuery

متد ()animate، برای متحرک سازی در jQuery استفاده می شود.


متد ()animate - متحرک سازی در jQuery

متد ()animate، برای متحرک سازی در jQuery استفاده می شود.

نحوه استفاده:

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

پارامترها:

پارامتر توضیح
params

الزامی است، یک یا چند خصوصیت دلخواه CSS برای متحرک سازی است.

speed

اختیاری است، سرعت متحرک سازی را مشخص می کند و می تواند با مقادیر "slow"، "fast" و یا میلی ثانیه مقدار دهی شود.

callback

اختیاری است، تابعی است که بعد از اجرای کامل متد ()animate اجرا می شود.

در مثال زیر، با استفاده از متد ()animate یک عنصر <div> را حرکت می دهیم تا خصوصیت left آن برابر با "250px" شود:

مثال (متحرک سازی در jQuery)

$("button").click(function(){
  $("div").animate({left:'250px'});
}); 
خودتان امتحان کنید »
lamp

بصورت پیشفرض تمام عناصر HTML دارای یک مکان استاتیک هستند و نمی توانند حرکت داده شوند.
همانطور که در آموزش CSS گفته شد، برای دستکاری مکان یک عنصر، باید خصوصیت position آنرا با یکی از مقادیر: fixed، absolute و یا relative مقداردهی نمود.


تنظیم چند خصوصیت CSS در متد ()animate

خصوصیت ها به طور همزمان برای متحرک سازی اعمال می شوند:

مثال (متحرک سازی در jQuery)

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
}); 
خودتان امتحان کنید »
lamp

آیا تمام خصوصیت های CSS را می توان در متد ()animate استفاده نمود؟

تقریباً بله! اما یک نکته مهم وجود دارد: برای استفاده از خصوصیت های CSS در متد ()animate باید آنها را "دنبال هم" نوشت. مثلاً بجای padding-right از paddingRight و یا بجای margin-left از marginLeft استفاده نمود.

همچنین متحرک سازی براساس رنگ، در هسته کتابخانه jQuery اضافه نشده است.
اگر می خواهید براساس رنگ ها متحرک سازی کنید، باید در سایت jQuery.com پلاگین مورد نظر را دانلود کنید.
(Color Animations plugin)


مقدار دهی نسبی در متد ()animate

می توان خصوصیت ها را نسبت به مقادیر فعلی شان، مقدار دهی نمود. برای انجام این کار هنگام مقدار دهی از "=+" یا "=-" استفاده کنید:

مثال (متحرک سازی در jQuery)

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
}); 
خودتان امتحان کنید »

تنظیم مقادیر از پیش تعریف شده در متد ()animate

شما حتی می توانید خصوصیت ها را با مقادیر  "show", "hide" و یا "toggle" مقداردهی کنید:

مثال (متحرک سازی در jQuery)

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
}); 
خودتان امتحان کنید »

قابلیت صف کردن چندین متد ()animate

اگر از متد ()animate چندین بار پشت سر هم استفاده کنید، jQuery یک صف داخلی از آنها ایجاد می کند. سپس آنها را یکی بعد از دیگری فراخوانی می کند.

بنابراین اگر می خواهید متحرک سازی های مختلفی را یکی بعد از دیگری اجرا کنید، بهتر است از قابلیت صف در jQuery استفاده کنید:

مثال 1

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
}); 
خودتان امتحان کنید »

در مثال زیر، ابتدا عنصر <div> به سمت راست حرکت می کند و سپس اندازه متن داخل آن افزایش می یابد:

مثال 2

$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
}); 
خودتان امتحان کنید »

jQuery Effects Reference

For a complete overview of all jQuery effects, please go to our jQuery Effect Reference.

دیدگاه‌ها  

+3 # فریبا mizraee 1394-07-28 14:52
ویژگی های استایل در اینجا فرق داره ؟
fontSize:'4em'
دیگه اینطوری نیست؟ font-Size
من color:#f00 اضافه کردم هیچی نشد برای تغییر رنگ
منهدم شد اصلا
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # مهرداد صلاحی 1394-07-28 18:05
با سلام.
کد خودتون رو قرار بدید تا بتونم راهنمایی کنم.
اینطوری دقیق نمی‌شه فهمید چه اتفاقی برای کد شما افتاده که منهدم شده.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # سيد احمد 1394-01-13 07:15
با سلام دوباره
داداش ممنون از راهنماییت
یه سوال دیگه داشتم؟!
تو بعضی از سایتها که مثلا با bootstarp طراحی شده اند(div ها)،
وقتی که اسکرول میکنی به طرف پایین این div ها به صورت اتوماتیک زیاد میشن،
یعنی اطلاعات که از دیتا بیس خونده میشه خود به خود به div ها اضاف میشه
این رو چه جوری باید انجام بدیم؟
باز هم ممنونم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # مهرداد صلاحی 1394-07-28 18:04
سلام دوست عزیز.
این تکنیک با استفاده از خاصیت ارتفاع پنجره و ارتفاع div‌ موردنظر صورت می‌گیره. وقتی که از یه حدی بیشتر اسکرول شد، یه درخواست توسط jQuery و ajax ارسال میشه و درخواست اطلاعات میشه و بعد از واکشی اطلاعات در جای موردنظر نمایش داده میشه.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # سيد احمد 1394-01-12 22:52
با سلام
داداش من این کد رو به صورت زیر تغییر دادم
اگه میشه بفرمایید از نطر ساختاری ایراد داره یا نه؟ $(document).rea dy(function(){
$("li").click(f unction(){
var div=$("div");
div.animate({height:'500px',opacity:'1.4'},"slow");

و اینکه چطور با کلیک دوباره به سر جای خود برگردد؟
با تشکر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+8 # امیر پهلوان صادق 1394-01-13 00:59
سلام
کد شما مشکلی ندارد.
برای اینکه بتوان با کلیک دوباره آنرا به حالت اولیه برگرداند باید از تابع ()toggle استفاده کنید.
مثال:$(document).ready(function(){
$("button").cli ck(function(){
var div = $("div");
div.toggle(function(){
div.animate({le ft:'0'}, 'slow');
div.animate({'m argin-left':'25 0px'}, 'slow');
});
});
});
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # amir ka 1395-07-30 22:39
سلام خسته نباشید
مگه برای .toggle برای تغییر وضعیت بین ()show و ()hide استفاده نمی شه
ممنون میشم جواب بدین با تشکر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # مهرداد صلاحی 1395-08-01 10:09
با سلام.
در جاهای دیگه هم کاربرد داره. مثلا یه زمانی نیاز هست با اتفاق افتادن یه حالتی، رویداد کلیک یک کنترل به کار بیفته، از toggle میشه استفاده کرد.

موارد کاربردش رو میتونید با سرچ به دست بیارید. محدود به show و hide نیست.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # amir ka 1395-08-05 00:04
سلام خیلی ممنون سایت خیلی خوبی دارین
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # معصومه 1393-11-08 12:26
سلام
در تعریف پارامتر callback یه اشتباه نوشتاری صورت گرفته اینکه این خصوصیت بعد از اجرای کامل متدfadein میاد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # امیر پهلوان صادق 1393-11-09 19:55
سلام، با تشکر ... اصلاح شد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن