jQuery প্রভাব - animate() পদ্ধতি
উদাহরণ
"div" এলিমেন্টের উচ্চতা পরিবর্তন করুন:
$(".btn1").click(function(){
$("#box").animate({height:"300px"});
});
বিবরণ ও ব্যবহার
animate() পদ্ধতি সমস্ত CSS প্রতিমানগুলির কাস্টম অ্যানিমেশন করে।
এই পদ্ধতি একটি এলিমেন্টকে একটি অবস্থা থেকে আরেকটি অবস্থায় পরিবর্তন করে। CSS প্রতিমানগুলি ক্রমবর্ধমানভাবে পরিবর্তিত হয়, যার ফলে অ্যানিমেশন এফেক্ট তৈরি হয়。
শুধুমাত্র সংখ্যালঘু মানগুলির জন্য অ্যানিমেশন তৈরি করা যায় (যেমন "margin:30px")। শব্দমান মানগুলির জন্য অ্যানিমেশন তৈরি করা যায় না (যেমন "background-color:red")。
মন্তব্য:সম্পর্কিত অ্যানিমেশন (রিলেটিভ অ্যানিমেশন) তৈরি করতে "+=" বা "-=" ব্যবহার করুন。
গ্রামাটিক্স ১
$().animate(স্টাইল,speed,easing,callback)
| প্রামাণ্যতা | বর্ণনা |
|---|---|
| স্টাইল |
অপরিহার্য। এটি অ্যানিমেশনের CSS শৈলী এবং মান নির্দিষ্ট করে। সম্ভব CSS শৈলীর মান (একটি উদাহরণ প্রদান করা হয়):
মন্তব্য:CSS স্টাইলসমূহ DOM নাম (যেমন "fontSize") দ্বারা নির্ধারিত হয়, নয় যেমন CSS নাম (যেমন "font-size") |
| speed |
অপশনাল। অ্যানিমেশনের গতি নির্দিষ্ট করুন। ডিফল্ট "normal" সম্ভাব্য মানসমূহ:
|
| easing |
অপশনাল। বিভিন্ন অ্যানিমেশন পদক্ষেপের স্থানে অ্যানিমেশনের গতি নির্দিষ্ট করতে easing ফাংশন স্থাপিত easing ফাংশনসমূহ:
সম্প্রসারিত প্লাগইনের মাধ্যমে আরও easing ফাংশন প্রদান করা হয় |
| callback |
অপশনাল। animate ফাংশন কার্যকর হওয়ার পরে কার্যকরী ফাংশন callback-র বিষয়ে আরও শিক্ষা লাভ করতে, আমাদের jQuery Callback এই চতুর্থিকা |
গঠনপদ্ধতি 2
$().animate(স্টাইল,options)
| প্রামাণ্যতা | বর্ণনা |
|---|---|
| স্টাইল | অপশনাল। অ্যানিমেশনের প্রভাবশালী CSS স্টাইল ও মান (যেমন উপরে বর্ণিত) |
| options |
অপশনাল। অ্যানিমেশনের অতিরিক্ত বিকল্পগুলি নির্দিষ্ট করুন সম্ভাব্য মানসমূহ:
|
