jQuery animate() মেথড নির্দিষ্ট CSS প্রোপার্টির ওপর কাস্টম অ্যানিমেশন পারফর্ম করে। এটি বেশ কিছু আর্গুমেন্ট এক্সেপ্ট করে। প্রথম আর্গুমেন্ট হলো CSS পরিবর্তনগুলো ধারণ করা একটি অবজেক্ট। দ্বিতীয় আর্গুমেন্ট মাল্টিপল অপশন হ্যান্ডল করতে পারে যেমন duration এবং একটি কলব্যাক ফাংশন।
animate()-এ প্রচুর পরিমাণ অপশন উপলব্ধ। এই ইন্ট্রোডাকশন একটি বিগিনার প্রাইমার পর্যন্ত সীমাবদ্ধ থাকবে। আমরা jQuery animate-এর সিনট্যাক্স এবং উদাহরণ কোড দেখব। আমাদের উদাহরণ কোড দেখাবে কীভাবে animate() ব্যবহার করে একটি <div> এক্সপ্যান্ড করতে হয়।
কেন jQuery animate() ব্যবহার করবেন?
jQuery animate()-এর অনেক ইউজ কেস রয়েছে। সহজ কথায়, আপনি এই মেথডটি যেকোনো সময় ব্যবহার করতে পারেন আপনার অ্যাপ্লিকেশনের ফ্রন্ট এন্ডে অ্যানিমেশনের প্রয়োজন হলে। এই মেথড একটি ডাইনামিক এবং কমপ্লেক্স সমাধান প্রদান করে।
অ্যানিমেশন ফ্রন্ট এন্ড ডেভেলপমেন্টে একটি স্ট্যান্ডার্ড প্র্যাকটিস হয়ে উঠেছে। animate() ব্যবহার করে পর্যাপ্ত প্র্যাকটিসের সাথে, আপনি আপনার প্রজেক্টের ফ্রন্ট এন্ডে অ্যানিমেশন ইমপ্লিমেন্ট করতে পারবেন কোনো সময়ে। চলুন কিছু সিনট্যাক্স শিখা শুরু করি।
jQuery animate() সিনট্যাক্স
যেমন আমরা সংক্ষেপে আলোচনা করেছি, animate() একটি CSS অবজেক্ট আর্গুমেন্ট হিসেবে নেয়। এটি সিলেক্টেড CSS প্রোপার্টির নতুন মান ধারণকারী একটি অবজেক্ট। একটি বেস্ট প্র্যাকটিস হলো animate() শুধু সেই এলিমেন্টে ব্যবহার করা যেটি স্টাইলশীতে রেফারেন্স করা আছে।
সকল jQuery মেথডের মত, animate() অবশ্যই একটি সিলেক্টেড এলিমেন্টে অ্যাটাচ্ড থাকতে হবে। সেখান থেকে, animate() কল করুন এবং CSS প্রোপার্টির একটি অবজেক্ট পাস করুন যাদের মান হলো চাওয়া ফাইনাল লুক। এখানে উল্লেখ করা গুরুত্বপূর্ণ যে animate() শুধু CSS-এর न्यूमেরিক্যাল প্রোপার্টির সাথে কাজ করে। কালার বা ফন্ট টাইপের মতো অ্যাট্রিবিউট animate()-এ পড়া যাবে না।
jQuery animate() একশনে
উপরোক্ত ব্যাখ্যাকে কোডে ভাঙিয়ে দেখি যাতে এটি আরও স্পষ্ট হয়, একটি বেসিক HTML রেন্ডারিং থেকে শুরু করে একটি বাটন এবং একটি <div>-এর।
HTML <button id="click">Click Me</button> <div id="block">Watch Me!</div>
দুই এলিমেন্টেরই id অ্যাট্রিবিউট আছে। এটি আমরা jQuery-তে সিলেক্ট করতে ব্যবহার করব। এখন দেখি কীভাবে আমরা <div>-কে স্টাইল করতে পারি যাতে আমরা animate() ব্যবহার করতে পারি।
CSS div { background-color: lightblue; width: 100px; border: 1px solid blue; }
এখানে, আমরা <div>-কে একটি ব্যাকগ্রাউন্ড কালার, চওড়া, এবং একটি ছোট বর্ডার দিয়ে স্টাইল করেছি। যখন আমরা jQuery ব্যবহার করে আমাদের <div>-কে সিলেক্ট করব, আমরা animate()-এ CSS অ্যাট্রিবিউটের একটি অবজেক্ট পাস করতে পারি। এই অ্যাট্রিবিউটগুলো সেই ফাইনাল পরিবর্তনগুলোকে রিফ্লেক্ট করবে যা আমরা দেখতে চাই।
$('#click').click(function() { $('#block').animate({ width: '70%', fontSize: '3em', borderWidth: '10px' }) })
যদি আমরা jQuery-কে ভাঙিয়ে দেখি, তবে আমরা দেখতে পাব যে আমরা বাটনটি click id অ্যাট্রিবিউট দিয়ে সিলেক্ট করেছি। তারপর আমরা jQuery click() মেথড কল করেছি একটি ইভেন্ট হ্যান্ডলার অ্যাটাচ করতে যা একটি ক্লিক পাওয়ার জন্য অপেক্ষা করবে। একবার click() ক্লিক ইভেন্ট পেলে, এটি কলব্যাক ফাংশন এক্সিকিউট করবে।
আপনার মেমори রিফ্রেশ করতে, একটি কলব্যাক ফাংশন হলো একটি ফাংশন যা অন্য একটি ফাংশনে পাস করা হয় এবং যা পরে এক্সিকিউট হবে। এই কেসে, এটি একটি ক্লিক ইভেন্ট ডিটেক্ট হওয়ার পরে। jQuery click() সম্পর্কে আরও পড়ুন এখানে।
কলব্যাক ফাংশনের ভিতরে যাওয়া, আমরা আমাদের <div>-কে সিলেক্ট করি। আমাদের বাটনের মত, আমরা block id অ্যাট্রিবিউট ব্যবহার করে সেটি সিলেক্ট করছি। এখন আমরা <div>-এ animate() কল করি এবং আমাদের CSS অবজেক্টটি পাস করি।
fontSize এবং borderWidth কীভাবে CSS-এ সেগুলো ডিক্লেয়ার করা হয় তার থেকে আলাদা হয় তা লক্ষ্য করুন। এটি হলো jQuery CSS প্রোপার্টিগুলো এক্সেপ্ট করে যেগুলো সাধারণত হাইফেনেটেড থাকে।
আমাদের CSS অবজেক্টের মানগুলো সেগুলো যা আমরা রেন্ডার করতে চাই একবার অ্যানিমেশন কমপ্লিট হলে। এখন, যখন আমরা বাটনে ক্লিক করব, আমরা <div>-কে অ্যানিমেট होते দেখব:
কাজ করলো! আমরা <div>-এর কন্টেন্ট সার্ভিসের সাথে একসাথে এক্সপ্যান্ড होते দেখছemos নতুন CSS মানগুলোর পর্যন্ত।
উপসংহার
jQuery animate()-এ এই বিগিনার প্রাইমারে, আমরা শিখলাম যে animate() একটি CSS অবজেক্টের ওপর অ্যানিমেশন পারফর্ম করে। সেই CSS অবজেক্টটি মেথডে ফাইনাল ডিসপ্লে মান সহ পাস করা হয়। এটি পুনরাবৃত্তি করার যোগ্য যে শুধু CSS-এর न्यুমেরিক্যাল মানগুলো animate()-এ পড়া যাবে। ব্যাকগ্রাউন্ড কালার এবং ফন্ট টাইপের মতো প্রোপার্টি পড়া যাবে না।
jQuery animate()-এ আরও অনেক জমিন কভার করা বাকি, তাই যখন এই ইন্ট্রোডাকশন স comuna করে, এখানে ক্লিক করুন। অফিসিয়াল ডকুমেন্টেশন পড়া এবং অন্তর্ভুক্ত উদাহরণগুলো প্র্যাকটিস করা সবসময় ভালো প্র্যাকটিস। jQuery animate() প্রথমে খুব কমপ্লেক্স লাগতে পারে, কিন্তু নিয়মিত প্র্যাকটিসের সাথে, আপনি আপনার চিন্তা থেকে অনেক দ্রুত অ্যানিমেশন মাস্টার করবেন!
