jQuery-তে animate মেথড

আমরা আগের পাঠে যে সমস্ত পদ্ধতি নিয়ে আলোচনা করেছি তা কিছুটা সীমিত - তারা সঠিকভাবে করে যার জন্য তারা তৈরি করা হয়েছে। যদি আপনার অ্যানিমেশনের উপর আরও নিয়ন্ত্রণের প্রয়োজন হয় - সর্বজনীন পদ্ধতি ব্যবহার করুন animate।

প্রথম প্যারামিটার হিসাবে এই মেথডটি একটি অবজেক্ট নেয়, যাতে আপনাকে CSS-এর নতুন মানগুলি সেট করতে হবে বৈশিষ্ট্য যা আপনি অ্যানিমেট করতে চান। এবং দ্বিতীয় প্যারামিটার হিসাবে - অ্যানিমেশন সম্পাদনের সময়।

নিম্নলিখিত HTML কোডে এই পদ্ধতিটি বাস্তবায়ন করা যাক:

<button id="button">click me</button>
<div id="elem">text...</div>

CSS কে এইরকম দেখতে দিন:

#elem {
	width: 150px;
	height: 150px;
	padding: 10px;
	border: 1px solid green;
}

আসুন বোতামে ক্লিক করলে এটি করা যাক উপাদানটি নিম্নলিখিত আকারে সঙ্কুচিত হয়েছে: উচ্চতা - 50px, প্রস্থ - 100px:

$('#button').click(function() {
	$('#elem').animate({height: 50, width: 100}, 1000);
});

যদি এই ফর্ম্যাটে মান নির্দিষ্ট করা হয় height: '+=50', তাহলে অ্যানিমেশন কাজ করবে এভাবে: বর্তমান উচ্চতা মান যোগ করা হবে 50px (আমাদের ক্ষেত্রে) এবং উপাদান হবে নতুন মান থেকে মসৃণভাবে অ্যানিমেটেড। এর উদাহরণ দেখি:

$('#button').click(function() {
	$('#elem').animate({height: '+=50', width: '+=50'}, 1000);
});

animate মেথড সম্পর্কে আরও বিস্তারিত জানতে jQuery রেফারেন্স দেখুন।

animate

নিম্নলিখিত মার্কআপ আছে:

<body>
	<div id="block"></div>
</body>

div {
	width: 100px;
	height: 100px;
	border: 1px solid black;
	cursor: pointer;
	margin-bottom: 20px;
}

এটি করুন যাতে div-এ ক্লিক করলে #block এর প্রস্থ বেড়ে যায় 200px সময়ে 1100ms।

প্রথম কাজ থেকে মার্কআপ ব্যবহার করুন। এটি করুন যাতে প্রতিবার ক্লিক করলে div সঙ্গে #block এর প্রস্থ বৃদ্ধি পায় 200px দ্বারা এবং প্রতিটি যেমন বৃদ্ধি সময় ঘটবে 900ms।

প্রথম কাজ থেকে মার্কআপ ব্যবহার করুন। এটি করুন যাতে প্রতিবার ক্লিক করলে div সঙ্গে #block, এর প্রস্থ এবং উচ্চতা বৃদ্ধি পায় 100px দ্বারা এবং প্রতিটি such বৃদ্ধি সময় ঘটবে 950ms।

প্রথম কাজ থেকে মার্কআপ ব্যবহার করুন। এটি করুন যাতে প্রতিবার ক্লিক করলে div সঙ্গে #block, এটি সরানো হবে ডানে 100px দ্বারা এবং প্রতিটি যেমন চলন্ত সময় ঘটবে 700ms।