با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره آموزش کاربردی آموزش jQuery ، را دنبال می کنند. تاکنون به افکت های جالب و مختلفی ، در چند جلسه اخیر ، اشاره کردیم. در این جلسه قصد داریم یک افکت بسیار جالب و منعطف . را به شما معرفی کنیم. ما در این بخش به مبحث پویا نمایی یا کار با Animation در jQuery با تابع ()animate ، می پردازیم.
در جلسات اخیر، با افکت های ابتدایی و سادتری آشنا شدید. که هر کدام در جای خود، کاربرد زیادی داشت. از جمله می توان به محو شدن در jQuery و در ادامه آن به مبحث Sliding در jQuery نیز. اشاره کرد.
اکنون به سراغ موضوع اصلی بخش ، پویا نمایی یا کار با Animation در jQuery ،می رویم.
در jQuery ، با استفاده از تابع ()animate ، می توانید. انیمیشن های سفارشی بسازید.
از تابع ()animate ، برای ایجاد انیمیشن روی عناصر html ، صفحه وب ، استفاده می شود.
ساختار:
1 | $(selector).animate({params},speed,callback); |
Params ، پارامترهای مورد نیاز خواص CSS ، را در بر می گیرد..
پارامتر اختیاری speed سرعت اجرای افکت انیمیشن ، را مشخص می کند. و می تواند مقادیر زیر را داشته باشد: “slow”، “fast” یا بر حسب میلی ثانیه.
پارامتر callback ، بخش اختیاری یک تابع است. که پس از تکمیل افکت انیمیشن ، روی یک عنصر، اجرا می شود.
مثال زیر عملکرد تابع ()animate ، را نمایش می دهد. به این صورت که عنصر <div> را به سمت راست، حرکت می دهد. تا زمانیکه صفت left (فاصله از سمت چپ) ، این عنصر به مقدار ۲۵۰px ، برسد:
1 2 3 | $("button").click(function(){ $("div").animate({left: '250px'}); }); |
در مثال زیر نشان می دهد که چگونه با استفاده از ()animate ، چندیدن خصوصیت از یک عنصر را، تغییر دهید:
1 2 3 4 5 6 7 8 | $("button").click(function(){ $("div").animate({ left: '250px', opacity: '0.5', height: '150px', width: '150px' }); }); |
با تابع ()animate ، می توانید، خصوصیات عناصر را ، بصورت نسبی (با استفاده از اعمالی مانند =+ یا =-) تغییر بدهید.
مثال:
1 2 3 4 5 6 7 | $("button").click(function(){ $("div").animate({ left: '250px', height: '+=150px', width: '+=150px' }); }); |
شما حتی می توانید از افکت های “show” ، “hide” و “toggle” ، نیز استفاده کنید.
مثال:
1 2 3 4 5 | $("button").click(function(){ $("div").animate({ height: 'toggle' }); }); |
در jQuery ، می توانید. چندین افکت را با تابع ()animate ، بصورت پشت سر هم، اجرا کنید. برای اینکار باید تمام افکت ها را بعد از تعریف منظم و پشت سر هم، در یک رویداد کلی ، قرار دهید.
مثال:
1 2 3 4 5 6 7 | $("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"); }); |
مثال ۲:
1 2 3 4 5 | $("button").click(function(){ var div = $("div"); div.animate({left: '100px'}, "slow"); div.animate({fontSize: '3em'}, "slow"); }); |
خب در این بخش از دوره نیز ، با یک افکت جالب و پرکاربرد، که در واقع در برگیرنده سایر افکت هاست، در قالب موضوع بخش ، پویا نمایی یا کار با Animation در jQuery آشنا شدید. امیدواریم که این آموزش نیز مورد توجه و استفاده ی ، کاربران گرامی ، قرار گرفته باشد.