মাস্টার jQuery অ্যানিমেট():কাস্টম সিএসএস অ্যানিমেশনের জন্য একটি দ্রুত গাইড

কেন jQuery অ্যানিমেট() ব্যবহার করবেন?

jQuery animate() এর জন্য অনেকগুলি ব্যবহারের ক্ষেত্রে রয়েছে . সহজভাবে বলতে গেলে, আপনার অ্যাপ্লিকেশনটির সামনের প্রান্তে একটি অ্যানিমেশন প্রয়োজন হলে আপনি এই পদ্ধতিটি ব্যবহার করতে পারেন। এই পদ্ধতি একটি গতিশীল এবং জটিল সমাধান প্রদান করে। 

সামনের দিকের বিকাশে অ্যানিমেশন আদর্শ অনুশীলনে পরিণত হয়েছে। animate() ব্যবহার করে যথেষ্ট অনুশীলন সহ , আপনি কিছুক্ষণের মধ্যে আপনার প্রকল্পের সামনের প্রান্তে অ্যানিমেশন বাস্তবায়ন করবেন। কিছু সিনট্যাক্স শিখে শুরু করা যাক। 

jQuery অ্যানিমেট() সিনট্যাক্স

যেমন আমরা সংক্ষেপে আলোচনা করেছি, animate() একটি CSS অবজেক্টের একটি আর্গুমেন্ট নেয়। এটি নির্বাচিত CSS বৈশিষ্ট্যের নতুন মান ধারণকারী একটি বস্তু। একটি সর্বোত্তম অনুশীলন হল শুধুমাত্র animate() ব্যবহার করা স্টাইলশীটে উল্লেখ করা একটি উপাদানের উপর। 

সমস্ত jQuery পদ্ধতির মত, animate() একটি নির্বাচিত উপাদান সংযুক্ত করা আবশ্যক. সেখান থেকে animate() কল করুন এবং পছন্দসই চূড়ান্ত চেহারা মান সঙ্গে CSS বৈশিষ্ট্য একটি বস্তু পাস. এখানে উল্লেখ করা গুরুত্বপূর্ণ যে animate() শুধুমাত্র CSS এর সংখ্যাসূচক বৈশিষ্ট্যের সাথে কাজ করে। রঙ বা ফন্টের প্রকারের মতো বৈশিষ্ট্যগুলি animate() দ্বারা পড়া হবে না .

jQuery অ্যানিমেট() অ্যাকশনে

একটি বোতাম এবং একটি

এর একটি বেসিক HTML রেন্ডারিং দিয়ে শুরু করে, এটিকে আরও স্পষ্ট করার জন্য উপরের ব্যাখ্যাটিকে কোডে ভেঙে দেওয়া যাক।

HTML
<button id="click">Click Me</button>
<div id="block">Watch Me!</div>

উভয় উপাদানের আইডি বৈশিষ্ট্য রয়েছে। এটিই আমরা jQuery দিয়ে নির্বাচন করতে ব্যবহার করব। এখন দেখা যাক কিভাবে আমরা

স্টাইল করতে পারি যাতে আমরা animate() ব্যবহার করতে পারি। .

CSS
 div {
 background-color: lightblue;
 width: 100px;
 border: 1px solid blue;
 }

এখানে, আমরা একটি পটভূমির রঙ, প্রস্থ এবং একটি ছোট বর্ডার দিয়ে

স্টাইল করেছি। যখন আমরা আমাদের

নির্বাচন করতে jQuery ব্যবহার করি, তখন আমরা animate() পাস করতে পারি CSS বৈশিষ্ট্যের একটি বস্তু। এই বৈশিষ্ট্যগুলি আমরা দেখতে চাই চূড়ান্ত পরিবর্তনগুলি প্রতিফলিত করবে। 

$('#click').click(function() {
 $('#block').animate({
 width: '70%',
 fontSize: '3em',
 borderWidth: '10px'
 })
})

যদি আমরা jQuery ভেঙে ফেলি, আমরা দেখতে পাব যে আমরা ক্লিকের আইডি বৈশিষ্ট্য দ্বারা বোতামটি নির্বাচন করেছি। তারপরে আমরা jQuery কে কল করি click() একটি ইভেন্ট হ্যান্ডলার সংযুক্ত করার পদ্ধতি যা একটি ক্লিক পাওয়ার জন্য অপেক্ষা করে। একবার click() ক্লিক ইভেন্ট গ্রহণ করে, এটি কলব্যাক ফাংশন চালাবে। 

আপনার মেমরি রিফ্রেশ করার জন্য, একটি কলব্যাক ফাংশন হল একটি ফাংশন যা অন্য ফাংশনে পাস করা হবে যা পরে কার্যকর করা হবে। এই ক্ষেত্রে, এটি একটি ক্লিক ইভেন্ট সনাক্ত করার পরে। jQuery click() সম্পর্কে আরও পড়ুন এখানে 

কলব্যাক ফাংশনের ভিতরে গিয়ে, আমরা আমাদের

নির্বাচন করি। ঠিক আমাদের বোতামের মতো, আমরা ব্লকের আইডি বৈশিষ্ট্যটি এটি নির্বাচন করতে ব্যবহার করছি। এখন আমরা animate() কল করি

-এ এবং এটিতে আমাদের CSS অবজেক্ট পাঠান। 

লক্ষ্য করুন কিভাবে ফন্ট সাইজ এবং বর্ডারউইথ তাদের ঘোষণা করার CSS পদ্ধতি থেকে আলাদা। এইভাবে jQuery সিএসএস বৈশিষ্ট্য গ্রহণ করে যা সাধারণত হাইফেন করা হয়। 

আমাদের CSS অবজেক্টের মানগুলি হল অ্যানিমেশন সম্পূর্ণ হলে আমরা রেন্ডার করতে চাই। এখন, যখন আমরা বোতামটি ক্লিক করব, আমরা দেখতে পাব

অ্যানিমেট: 

এটা কাজ! আমরা নতুন CSS মান না পৌঁছানো পর্যন্ত

-এর বিষয়বস্তু একসাথে প্রসারিত হতে দেখি। 

উপসংহার

এই শিক্ষানবিস প্রাইমারে jQuery animate() , আমরা শিখেছি যে animate() একটি CSS অবজেক্টে অ্যানিমেশন সম্পাদন করে। সেই CSS অবজেক্টটি চূড়ান্ত প্রদর্শন মান সহ পদ্ধতিতে পাস করা হয়। এটি পুনরাবৃত্তি করে যে শুধুমাত্র সংখ্যাসূচক CSS মানগুলি animate() দ্বারা পড়া হবে . পটভূমির রঙ এবং ফন্টের প্রকারের মতো বৈশিষ্ট্যগুলি পড়া হবে না।

jQuery animate() দিয়ে কভার করার জন্য আরও অনেক কিছু আছে , তাই যখন এই ভূমিকা অর্থপূর্ণ হয়, এখানে ক্লিক করুন. অফিসিয়াল ডকুমেন্টেশন পড়া এবং উদাহরণ সহ অনুশীলন করা সর্বদা ভাল অনুশীলন। jQuery animate() প্রথমে বেশ জটিল মনে হতে পারে, কিন্তু নিয়মিত অনুশীলনের মাধ্যমে, আপনি যত তাড়াতাড়ি ভাবছেন তার চেয়ে দ্রুত অ্যানিমেশন আয়ত্ত করতে পারবেন!