jQuery-র animate() মেথড একটি শক্তিশালী টুল যা ডকুমেন্টের যেকোনো এলিমেন্টে কাস্টম এনিমেশন তৈরি করার সুবিধা দেয়। এটি CSS প্রপার্টি পরিবর্তন করে এলিমেন্টগুলিতে স্মুথ এনিমেশন প্রদান করে।
কাস্টম এনিমেশন সেটআপ করার নিয়ম
animate() ফাংশনের সাধারণ সিনট্যাক্স হল:
$(selector).animate(properties, duration, easing, callback);
- properties: একটি অবজেক্ট যা এনিমেশন শেষে যে CSS প্রপার্টি এবং ভ্যালু নিবে তা নির্ধারণ করে।
- duration: এনিমেশন কত সময় চলবে তা মিলিসেকেন্ডে বা প্রিডিফাইন্ড স্ট্রিং ('slow', 'fast') হিসেবে নির্দিষ্ট করা যায়।
- easing: এনিমেশনের টাইমিং ফাংশন ('swing' বা 'linear')।
- callback: এনিমেশন শেষ হলে যে ফাংশন এক্সিকিউট হবে।
উদাহরণ
একটি বক্সকে মুভ করানো
ধরুন, আপনি একটি বক্সকে ডান দিকে ২০০ পিক্সেল মুভ করাতে চান এবং তার রং পরিবর্তন করতে চান।
<div style="width:100px; height:100px; background-color:red; position:absolute;"></div>
$("div").animate({
left: '+=200', // বর্তমান অবস্থান থেকে ডানে ২০০ পিক্সেল
backgroundColor: "#0000ff" // রং নীল করা
}, 2000, "swing", function() {
// এনিমেশন শেষে একটি মেসেজ দেখান
alert("এনিমেশন সম্পন্ন!");
});
মনে রাখবেন, jQuery নেটিভলি কালার প্রপার্টিজের জন্য এনিমেশন সাপোর্ট করে না। এর জন্য আপনার jQuery UI বা অন্য প্লাগইন প্রয়োজন হবে।
হাইট এবং ওপাসিটি পরিবর্তন করা
একটি এলিমেন্টের উচ্চতা এবং অস্পষ্টতা পরিবর্তন করা।
$("#myElement").animate({
height: 'toggle', // উচ্চতা টগল করা
opacity: 'toggle' // অস্পষ্টতা টগল করা
}, 1500);
animate() মেথড দিয়ে jQuery আপনাকে এলিমেন্টগুলির উপর কাস্টম এনিমেশন তৈরির ক্ষমতা দেয়। এর মাধ্যমে আপনি ওয়েব পেজে বিভিন্ন ধরনের ইন্টারঅ্যাকটিভ এফেক্ট তৈরি করতে পারেন, যা ব্যবহারকারীর অভিজ্ঞতায় উন্নতি আনে।
Content added By
Read more
