animate পদ্ধতি

animate পদ্ধতি বিভিন্ন CSS বৈশিষ্ট্যের জন্য অ্যানিমেশন ইফেক্ট তৈরি করতে দেয়। একমাত্র বাধ্যতামূলক প্যারামিটার হল CSS বৈশিষ্ট্যসহ একটি অবজেক্ট, যেমনটি আমরা css পদ্ধতিতে পাস করি। অনেকগুলি বৈশিষ্ট্য, যার সংখ্যাসূচক নয় এমন মান বা বিভিন্ন মান রয়েছে, সেগুলি jQuery-এর বেসিক ফাংশনালিটি দ্বারা অ্যানিমেট করা যায় না (উদাহরণস্বরূপ background-color)। সংক্ষিপ্ত CSS বৈশিষ্ট্যের নামগুলি, যেমন font - সর্বদা সমর্থিত নয়, এর পরিবর্তে fontSize বা font-size ব্যবহার করতে হবে। মানের আগে '+=' বা '-=' রাখা যেতে পারে, এমন ক্ষেত্রে পরবর্তীতে নির্দিষ্ট করা মানটি বৈশিষ্ট্যের বর্তমান মান থেকে যোগ বা বিয়োগ করা হবে। সংখ্যাসূচক মানের পরিবর্তে show, hide বা toggleও রাখা যেতে পারে। সমস্ত jQuery ইফেক্ট, animate সহ, গ্লোবালি jQuery.fx.off = true সেটিং ব্যবহার করে নিষ্ক্রিয় করা যেতে পারে, যা সময়কালের মান 0 এ সেট করে।

সিনট্যাক্স

অ্যানিমেশনের প্রথম প্যারামিটার হিসাবে CSS বৈশিষ্ট্য এবং তাদের মান সহ একটি অবজেক্ট কী: মান ফরম্যাটে পাস করা হয়, যা আমরা অ্যানিমেট করতে চাই। বাকি প্যারামিটারগুলি ঐচ্ছিক হিসাবে বিবেচিত হয়। দ্বিতীয় প্যারামিটার - মিলিসেকেন্ডে অ্যানিমেশনের সময়কাল নির্ধারণ করে, ডিফল্টভাবে 400ms। তৃতীয় প্যারামিটার ট্রানজিশনের জন্য ইজিং ফাংশন (ডিফল্টভাবে এটি swing), এবং চতুর্থ - একটি callback ফাংশন, যা অ্যানিমেশন সম্পূর্ণ হওয়ার পরে চালু হবে:

.animate(properties, [duration ], [easing ], [callback ]);

সময় শুধুমাত্র মিলিসেকেন্ডে নয়, slow (600ms) এবং fast (200ms) কীওয়ার্ড দিয়েও নির্ধারণ করা যেতে পারে, মান যত বেশি, অ্যানিমেশন তত ধীর। পদ্ধতিতে বিভিন্ন অপশন, জাভাস্ক্রিপ্ট অবজেক্ট আকারে, যাতে কী: মান জোড়া রয়েছে, দ্বিতীয় প্যারামিটার হিসাবে পাঠানো যেতে পারে:

.animate(properties, options);

উদাহরণস্বরূপ, CSS বৈশিষ্ট্য width এবং height এর জন্য toggle মান সেট করি। সময়কাল 5000ms, ইজিং ফাংশনগুলি একটি অবজেক্ট আকারে পাস করব, প্রস্থের জন্য এটি হবে একটি লিনিয়ার ফাংশন, এবং উচ্চতার জন্য - easeOutBounce, এছাড়াও অ্যানিমেশন সম্পূর্ণ হওয়ার পরে আমাদের ফাংশনটি একবার কার্যকর হবে (complete কী দেখুন), যা #test উপাদানের পরে 'Animation complete.' লেখা সহ একটি div রাখবে:

$('#test').animate({
	width: 'toggle',
	height: 'toggle'
}, {
	duration: 5000,
	specialEasing: {
		width: 'linear',
		height: 'easeOutBounce'
	},
	complete: function() {
		$(this).after('<div>Animation complete.</div>');
	}
});

নীচের টেবিলে options অবজেক্টের বৈশিষ্ট্য এবং পদ্ধতি এবং তাদের বিবরণ দেওয়া হল:

নাম	বিবরণ
`duration`	মিলিসেকেন্ডে অ্যানিমেশনের সময়কাল - স্ট্রিং বা সংখ্যা। ডিফল্টভাবে `400ms`।
`easing`	কোন ইজিং ফাংশন ব্যবহার করতে হবে তা নির্ধারণ করে। ডিফল্টভাবে `swing`।
`queue`	বুলিয়ান মান বা স্ট্রিং। ডিফল্টভাবে `true`। নির্দেশ করে - অ্যানিমেশনটিকে কিউতে রাখা হবে কিনা। `false` মান হলে অ্যানিমেশন অবিলম্বে শুরু হবে। যদি প্যারামিটার স্ট্রিং হিসাবে পাস করা হয়, তাহলে অ্যানিমেশনটি এই প্যারামিটার দ্বারা উপস্থাপিত কিউতে রাখা হবে। কাস্টম নাম সহ কিউ ব্যবহার করার সময়, অ্যানিমেশনটি স্বয়ংক্রিয়ভাবে শুরু হবে না, এটি শুরু করতে - `dequeue('queuename')` ব্যবহার করুন।
`specialEasing`	এখানে আপনি একটি অবজেক্ট পাস করতে পারেন, যার কীগুলি হবে CSS বৈশিষ্ট্য, এবং মানগুলি - সংশ্লিষ্ট ইজিং ফাংশন।
`step`	একটি ফাংশন, যা প্রতিটি অ্যানিমেটেড উপাদানের প্রতিটি অ্যানিমেটেড বৈশিষ্ট্যের জন্য কল করা হয়। এটি `Tween` অবজেক্টটি পরিবর্তন করতে দেয় যাতে বৈশিষ্ট্যের মান সেট করার আগে এটি পরিবর্তন করা যায়। এটি প্যারামিটার হিসাবে `tween`-এর বর্তমান মান এবং `Tween` অবজেক্ট গ্রহণ করে।
`progress`	অ্যানিমেশনের প্রতিটি ধাপের পরে কল করা হয় এমন একটি ফাংশন, প্রতিটি উপাদানের জন্য শুধুমাত্র একবার করে, অ্যানিমেটেড বৈশিষ্ট্যের সংখ্যা নির্বিশেষে। ফাংশনটি তিনটি প্যারামিটার গ্রহণ করে `animation` (প্রমিস আকারে), `progress` (`0` থেকে `1` পর্যন্ত সংখ্যা) এবং `remainingMs` (বাকি থাকা মিলিসেকেন্ডের সংখ্যা)।
`complete`	একটি ফাংশন, যা উপাদানের অ্যানিমেশন শেষ হওয়ার পরে একবার কল করা হয়। ফাংশনটি `animation` (প্রমিস আকারে) গ্রহণ করে।
`start`	একটি ফাংশন, যা কল করা হয় যখন উপাদানের অ্যানিমেশন শুরু হয়। ফাংশনটি `animation` (প্রমিস আকারে) এবং `jumpedToEnd` (বুলিয়ান মান। যদি `true` হয়, তাহলে অ্যানিমেশন স্বয়ংক্রিয়ভাবে শেষ হয়ে যায়) গ্রহণ করে।
`done`	একটি ফাংশন, যা কল করা হয় যখন উপাদানের অ্যানিমেশন শেষ হয় (এর প্রমিস সফলভাবে সম্পূর্ণ হয়েছে)। ফাংশনটি `animation` (প্রমিস আকারে) এবং `jumpedToEnd` (বুলিয়ান মান। যদি `true` হয়, তাহলে অ্যানিমেশন স্বয়ংক্রিয়ভাবে শেষ হয়ে যায়) গ্রহণ করে।
`fail`	একটি ফাংশন, যা কল করা হয় যখন উপাদানের অ্যানিমেশন ত্রুটি সহ শেষ হয় (এর প্রমিস ত্রুটি সহ সম্পূর্ণ হয়েছে)। ফাংশনটি `animation` (প্রমিস আকারে) এবং `jumpedToEnd` (বুলিয়ান মান। যদি `true` হয়, তাহলে অ্যানিমেশন স্বয়ংক্রিয়ভাবে শেষ হয়ে যায়) গ্রহণ করে।
`always`	একটি ফাংশন, যা কল করা হয় যখন উপাদানের অ্যানিমেশন সম্পূর্ণ হয় বা শেষ না হয়ে বন্ধ হয়ে যায় (এর প্রমিস সফলভাবে বা ত্রুটি সহ সম্পূর্ণ হয়েছে)। ফাংশনটি `animation` (প্রমিস আকারে) এবং `jumpedToEnd` (বুলিয়ান মান। যদি `true` হয়, তাহলে অ্যানিমেশন স্বয়ংক্রিয়ভাবে শেষ হয়ে যায়) গ্রহণ করে।

উদাহরণ

আসুন #left বাটনে ক্লিক করলে, সবুজ বর্গক্ষেত্রটিকে বাম দিকে 50px সরাই, এবং #right বাটনে ডান দিকে 50px সরাই, সময়কালও 600ms - slow কমান্ড দিয়ে সেট করি:

<button id="left">left</button>
<button id="right">right</button>
<div class="block"></div>

div {
	position: absolute;
	background-color: green;
	left: 50px;
	width: 100px;
	height: 100px;
	margin: 5px;
}

$('#right').click(function() {
	$('.block').animate({'left': '+=50px'}, 'slow');
});
	
$('#left').click(function() {
	$('.block').animate({'left': '-=50px'}, 'slow');
});

আরও দেখুন

show পদ্ধতি,
যা উপাদানগুলিকে মসৃণভাবে দেখায়
stop পদ্ধতি,
যা শুরু করা অ্যানিমেশন বন্ধ করতে দেয়
delay পদ্ধতি,
যা ইভেন্টগুলির বিলম্ব সেট করে
jQuery.fx.off বৈশিষ্ট্য,
যা গ্লোবালি অ্যানিমেশন নিষ্ক্রিয় করতে দেয়
animated সিলেক্টর,
যে উপাদানগুলি বর্তমানে অ্যানিমেশনে জড়িত সেগুলি বেছে নেয়