আসসালামু আলাইকুম। কেমন আছেন সবাই। নিশ্চয় ভালো আছেন? আশা করছি ভালো আছে। আল্লাহর অশেষ রহমতে আমিও ভালো আছি। কথা ছিল প্রতিদিন টিউনের মাধ্যমে এই সিরিজটা শেষ করে ফেলবো, কিন্তু অনিবার্য কারণে আমি গত তিন দিন অনলাইনেই আস্তে পারিনি। তাই পোস্টও করতে পারিনি। তার জন্য আমি সকলের কাছে ক্ষমা চেয়ে নিচ্ছি। সো আজ আমরা জানবো, fadeIn(), fadeOut() & fadeToggle() সম্পর্কে, তো চলুন আজকের পর্বে।

আমরা সকলেই জানি hide(), show() & toggle() মেথড কিভাবে লিখতে হয়। একি পদ্ধতিতে আমরা fadeIn(), fadeOut() & fadeToggle() লিখে ব্যবহার করতে পারি। তার আগে আমাদের একটি বিষয় জানতে হবে তা হলঃ জাভাস্ক্রিপ্টে ২টি শব্দকে একত্রে লিখার জন্য একটি বিশেষ নিয়ম রয়েছে। তা হল ২টো শব্দের প্রথম শব্দটা সম্পূর্ণ ছোট অক্ষরে(small letter) লিখতে হবে এবং পরের শব্দটার প্রথম অক্ষর টি বড় অক্ষর (capital letter) এ লিখতে হবে। যেমন টা আমি একটু আগে লিখেছি, তাও আবার লিখছি ex: fadeIn()। এখানে fade এবং in দুটো শব্দ, তো জাভাস্ক্রিপ্টের নিয়ম অনুসারে আমাদের ২টো শব্দের ২য় শব্দটা লিখার সময় তার প্রথম অক্ষরটি বড় অক্ষরে লিখতে হবে। আর এই ধরনের লিখাকে বলা হয় কেমেল ক্যাস (camalCase)।

তো এখন আমরা যদি এখন এখটা ডিভিশন নিয়ে তাতে এই এফেক্ট গুলো দেওয়ার চেষ্টা করি কিভাবে করতে পারি। তো চলুন দেখে নেই।

আমাদের তৈরি করা index.html ফাইলে আমরা নিচের কোড গুলো লিখতে পারি।

<div class="fade_element">

This element will be fading.

</div>

<button class="fadein">Fade In</button>

<button class="fadeout">Fade Out</button>

<button class="fadetoggle">Fade Toggle</button>

আশা করি আপনারা বুঝতে পারছেন এখানে এইচটিএমএলে কি লিখা আছে, আমি আর রিপিট করছি না। তো এখন আমরা আমাদের তৈরি করা style sheet এ উপরে করা এইচটিএমএল কে কিছু স্টাইল দিয়ে সাজাতে পারি। সেজন্য আমরা আমাদের css ফাইলে নিচের কোডটুকু লিখতে পারি।

.fade_element{

display: block; width:300px; height:300px; background-color:#20bf6b; border-radius:7px; margin:0 auto; padding:0;

}

তো আমরা আমাদের এইচটিএমএল এবং সিএসএস এ কোডগুলো সম্পূর্ণ রুপে লিখে ফেলেছি। চলুন আমরা এখন এপেক্ট গুলো দেখি।

Fade In

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

$(".fade_element").fadeIn();

});

Fade Out

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

$(".fade_element").fadeOut();

});

Fade In

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

$(".fade_element").fadeToggle();

});

তো আমরা fadeIn, fadeOut & fadeToggle এর কোড গুলো লিখে ফেলেছি। তো চলুন কোড গুলো বুঝার চেষ্টা করি।

আমরা যদি কোড গুলো ভালো করে খেয়াল করি, তাহলে দেখব, গত পর্বের নেয় এখানে কোড গুলোও সেম, শুধু একটু ভিন্ন হচ্ছে fadeIn(), fadeOut() & fadeToggle()। তো এর কাজ কি? এর কাজ হলঃ

fadeIn() কাজ হল, কোন এলিমেন্ট যদি হাইড করা থাকে তাহলে তাকে যদি সো করাতে হয় এবং তা যদি একটু স্লো মোশনে হয় তার জন্য এই মেথড টি ব্যবহার করা হয়। আমরা যদি গত পর্বের কোড গুলো ব্যবহার করে থাকি তাহলে দেখব যে, সো মেথড এ সো বাটন এ ক্লিক করলে এলিমেন্ট গুলো হুট করে আসে, তাতে করে ইউজার একটু ঘাবড়ে যেতে পারে। তার বদলে এই মেথড টি ব্যবহার করলে এলিমেন্ট একটু ধীরে আসেবে এবং ব্যবহারকারীও  ঘাবড়ে যাচ্ছে না।

fadeOut() কাজ হল, fadeIn() এর উল্টোটা। মানে এই মেথড স্লো মোশনে এলিমেন্টকে আনার বদলে এলিমেন্টকে হারাতে সাহায্য করে।

fadeToggle() এর কাজ হল, একটি বাটনে ক্লিক করে এক সংঙ্গে দুটো কাজই সম্পাদন করা। মানে একটি বাটন ক্লিক করে fadeIn() & fadeOut() এ দুটো কাজই সম্পাদন করা।

তো আজ এই পর্যন্তই, আগামী পর্বে আবার দেখা হবে jQuery এর slide মেথড নিয়ে। সো ততক্ষন পর্যন্ত আল্লাহ হাফেজ। সকলে সকলের জন্য দোয়া করবেন।