আশাকরি ভালো আছেন, আমি আলহামদুল্লিহা ভালো আছি। তো আপনারা আশা করি আগের পর্বগুলো পরে কিছুটা ধারনা পেয়েছেন জেকুয়ারি সম্পর্কে। আজকের টাইটেল দেখে হয়তো বুঝে গেছে আজ বেশি কিছু মেথড নিয়ে আলোচনা হবে। কারণ কাজের জন্য আমি কয়েকদিন কোন কিছুই লিখতে পারিনি, কিন্তু কথা ছিল দৈনিক লিখার। তো চলুন দেখেনি আজ আমরা কি কি জানবো।

• Sliding Effects
• Animation Effects
• Stop Effects
• Call Back Effects
• Chaining Effects

তো চলুন শুরু করা যাক আজকের পর্ব। প্রথমেই আমরা দেখব Sliding Effects সম্পর্কে। এটিও FadeIn এবং FadeOut এর মতো কাজ করে কিন্তু একটু ভিন্ন ধর্মী। fade এর যেমন In & Out এফেক্ট রয়েছে এর কিন্তু তা নেই। এটি হচ্ছে slide এফেক্ট, তাই এর রয়েছে Up & Down এফেক্ট। যেমন কোন একটি বাটনে ক্লিক করলে যেকোন একটি আইটেম উপর থেকে slide করে নামবে এবং আরেকটি বাটনে ক্লিক করলে আইটেমটি slide করে উপরে চলে যাবে। স্লাইড এর জন্য আমরা নিচের  পদ্ধতি ব্যবহার করতে পারি।

Slide Up : $(selector).slideUp();

Slide Down : $(selector).slideDown();

স্লাইড আপ ও ডাউন এক সঙ্গে সংঘটিত করার জন্য নিচের পদ্ধতি ব্যবহার করতে পারি।

Slide UP & Down : $(selector).slideToggle();

আমরা দেখলাম কিভাবে স্লাইড ব্যবহার করা যায়। তো চলুন একটা ছোট লাইভ এক্সাম্পল দেখে নেওয়া যাক। তার জন্য আপনাদের দূরে কোথাও যেতে হবে না। TechTunes এই বিদ্যমান আছে এর এক্সাম্পল। নিচের ছবিটি লক্ষ্য করুন

এখানে বক্স আকৃতির জিনিসটা দেখতে পাচ্ছি এইটিতে ক্লিক করলে দেখবেন একটি বক্স নামছে এবং আবার ক্লিক করলে বক্সটি হাইড হয়ে যায়। একবার ট্রাই করে দেখতে পারেন।

এখন আমরা জেকুয়ারির খুবই সুন্দর ও পাওয়ারফুল মেথড সম্পর্কে জানবো, আর তা হলে animate() মেথড। এটি লিখার পদ্ধতি প্রায় আগের গুলোর মতন কিন্তু সিনটেক্স গত ভাবে একটু ভিন্নতা রয়েছে। আমরা এর আগের মেথডে দেখেছি মেথড দিয়ে আর ভেতর স্পিড ও কলব্যাক ফাংশান দিতে হয়। কিন্তু এই মেথডে একটি নতুন অংশ রয়েছে যা {} চিহ্ন দিয়ে সুচিত। এর ভেতর আমরা সিএসএস এর আইটেম দিয়ে সুন্দর সুন্দর এফেক্ট দিতে পারবো। চলুন দেখেনি animate() মেথড লিখার পদ্ধতিঃ

$(selector).animate({

css property : value,

css property : value

});

আমাদের এভাবে করেই এই মেথডটি ব্যবহার করতে হবে। মেথডে যদি একের অধিক আইটেম যুক্ত করতে হয় তাহলে (, ) কমা ব্যবহার করতে হবে এবং শেষের আইটেমে কমা দিতে হবে না। এই মেথডে সিএসএস এর সকল প্রপার্টি ব্যবহার করা যায় না। যে যে প্রপার্টি গুলো ব্যবহার করা যায় তার লিস্ট নিচে দেওয়া হলঃ

• backgroundPositionX
• backgroundPositionY
• borderWidth
• borderBottomWidth
• borderLeftWidth
• borderRightWidth
• borderTopWidth
• borderSpacing
• margin
• marginBottom
• marginLeft
• marginRight
• marginTop
• outlineWidth
• padding
• paddingBottom
• paddingLeft
• paddingRight
• paddingTop
• height
• width
• maxHeight
• maxWidth
• minHeight
• minWidth
• fontSize
• bottom
• left
• right
• top
• letterSpacing
• wordSpacing
• lineHeight
• textIndent

উপরের লিস্ট এর আইটেম গুলো আমরা animate() মেথড এ ব্যবহার করতে পারবো। আপনারা এই আইটেম গুলো ব্যবহার করে দেখবেন আর আমাদের টিউমেন্ট করে জানাবেন যদি কোন প্রকার সমস্যায় পড়েন এবং আপনারা এই মেথড ব্যবহার করে সুন্দর একটা এফেক্ট বানিয়ে আমাকে দেখাবেন। যদি আপনাদের পক্ষে সম্ভব হয়।

এখন আমরা জানবো stop এফেক্ট সম্পর্কে। মনে করুন আপনি একটি এফেক্ট সংঘটিত করলেন যা ১ মিনিট ধরে চলবে। তো আপনি চাইছে একটি বাটনে ক্লিক করে আপনার এফেক্টটি মাঝ পথে দাঁড় করিয়ে রাখবেন এবং আরেকটি বাটনে ক্লিক করে কার্যটি পুনঃরায় যেখানে বন্ধ করেছেন সেখান থেকেই আবার চালু করবেন। তো চলুন এটি আমরা কিভাবে সংঘটিত করতে পারি তা দেখে নিঃ

Stop করার জন্যঃ $("button#stop").stop();

Start করার জন্যঃ

$("button#start").animate({

css property : value

});

তো আমরা দেখে নিলাম কিভাবে চলন্ত এফেক্টকে আমরা দাঁড় করিয়ে রাখতে পারি এবং আবার পুনঃরায় শুরু করতে পারি যেখানে বন্ধ করেছি সেখান থেকে।

সো এখন আমরা কলব্যাক সম্পর্কে জানবো। এটা তেমন বেশি পেচানোর কিছু নাই। আমরা এর আগেই জেকুয়ারির সিনটেক্স সম্পর্কে, এটাও ঠিক তেমনি, চলুন দেখেনি কলব্যাক লিখার পদ্ধতিঃ

$(selector).action(speed, callback function(){

function goes to here.

});

এটাই হচ্ছে মুলত কলব্যাক ফাংশন লিখার সিনটেক্স। একটা উদাহরণ যদি দেখিঃ

$("button").click(function(){

$("p").hide(1000, function(){

alert("P is hide and This is callback function");

});

});

এভাবে আমরা কলব্যাক ফাংশান লিখতে পারি। তো চলুন এখানে কি বুঝানো হয়েছে তা দেখেনি। এখানে বলা হয়েছে বাটনে ক্লিক করলে p এলিমেন্ট ১ সেকেন্ড ধরে হাইড হবে এবং সম্পূর্ণ হাইড হয়ে গেলে আরেকটি ফাংশান কাজ করবে এবং এর এলার্ট নোটিফিকেশন দেখাবে এবং তার ভেতরে লিখা দেখাবে। এভাবে আমরা কলব্যাক ফাংশন ব্যবহার করতে পারি।

এখন আমরা জানবো chaining কি এবং কেন আমরা এটি ব্যবহার করবো। মনে করুন আমাদের প্রোজেক্টে কোন একটি এলিমেন্টকে কয়েকটি জেকুয়ারি এফেক্ট দিতে চাই, তো আমরা চাইলে এই এফেক্টগুলো একটি লাইনে লিখতে পারি আর এই এক লাইনে সকল মেথড লিখার পদ্ধতিই হল chaining। একটি এলিমেন্টে যদি কয়েকটি মেথড ব্যবহার হয় এবং সেগুলো যদি প্রত্যেকটি আলাদা আলাদা লাইনে থাকে তাহলে ব্রাউজার প্রত্যেকটি লাইন পড়ে কাজ করতে সময় নিবে যার দরুন সাইট সম্পূর্ণ লোড হতে সমন নিবে নরমাল এর চেয়ে বেশি। তাই আমরা chaining পদ্ধতি ব্যবহার করব। চলুন আমরা এর একটি উদাহরণ দেখেনিঃ

$("button").click(function(){

$("p").animate({left:'100px', background:'red'}).fadeOut(1500);

});

তো আমরা আমাদের আজকের পর্বের শেষ প্রান্তে চলে এসেছি। আশা করি এই পর্বে আপনার জেকুয়ারির সম্পর্কে ভালো ধারনা পেছেন। আপনারা ভালো করে সকল পর্বের পদ্ধতি গুলো ভালো ভাবে প্রাক্টিস করবেন এবং এগুলো দিয়েই আপনি সুন্দর সুন্দর এফেক্ট বানাতে পারবেন। ভালো থাকবেন সবাই এবং আমার জন্য দোয়া করবেন যাতে আমি যতটুকু জানি আপনাদের যাতে জানাতে পারি, যদি কোন প্রকার ভুল হয়ে থাকে তাহলে ক্ষমার দৃষ্টিতে দেখবেন আশা করি। কারণ আমিতো মানুষ, ফেরেশতা নয়ই। আজ এই পর্যন্ত সকলকে জানাই নববর্ষের শুভেচ্ছা এবং শবে-মেরাজের মোবারাকবাদ। আসসালামু আলাইকুম