jQueryUI-তে Show, Hide, এবং Toggle ইফেক্টস ব্যবহার করে আপনি ওয়েবসাইটের উপাদানগুলোকে আরো ইন্টারঅ্যাকটিভ এবং ডাইনামিকভাবে প্রদর্শন বা গোপন করতে পারেন। এই ইফেক্টগুলো ব্যবহারকারীদের জন্য সুন্দর অ্যানিমেশন এবং ইন্টারঅ্যাকশন তৈরি করতে সহায়তা করে, যা ইউজার এক্সপেরিয়েন্সকে উন্নত করে।
Show Effect
Show ইফেক্ট ব্যবহার করে আপনি একটি গোপন উপাদানকে ধীরে ধীরে প্রদর্শন করতে পারেন। এর মাধ্যমে আপনি ইফেক্টের সময়কাল নির্ধারণ করতে পারবেন।
উদাহরণ:
<button id="showButton">Show Content</button>
<div id="content" style="display: none;">
<p>এটি কিছু কন্টেন্ট।</p>
</div>
<script>
$(document).ready(function() {
$("#showButton").click(function() {
$("#content").show(1000); // 1 সেকেন্ডে কন্টেন্টটি প্রদর্শিত হবে
});
});
</script>
এখানে show() মেথড ব্যবহার করা হয়েছে, যা কন্টেন্টটিকে 1000 মিলিসেকেন্ডে (1 সেকেন্ড) ধীরে ধীরে প্রদর্শন করবে।
কাস্টমাইজেশন:
- show(500): এখানে,
500মানে হচ্ছে 500 মিলিসেকেন্ড (0.5 সেকেন্ড) সময়ের মধ্যে কন্টেন্টটি দৃশ্যমান হবে।
Hide Effect
Hide ইফেক্ট ব্যবহার করে আপনি একটি প্রদর্শিত উপাদানকে ধীরে ধীরে গোপন করতে পারেন।
উদাহরণ:
<button id="hideButton">Hide Content</button>
<div id="content" style="display: block;">
<p>এটি কিছু কন্টেন্ট।</p>
</div>
<script>
$(document).ready(function() {
$("#hideButton").click(function() {
$("#content").hide(1000); // 1 সেকেন্ডে কন্টেন্টটি গোপন হবে
});
});
</script>
এখানে hide() মেথড ব্যবহার করা হয়েছে, যা কন্টেন্টটিকে 1000 মিলিসেকেন্ডে গোপন করবে।
কাস্টমাইজেশন:
- hide(300): এখানে,
300মানে 300 মিলিসেকেন্ড (0.3 সেকেন্ড) সময়ের মধ্যে কন্টেন্টটি গোপন হবে।
Toggle Effect
Toggle ইফেক্ট ব্যবহার করে আপনি একই উপাদানটি একে একে প্রদর্শন এবং গোপন করতে পারেন। যদি উপাদানটি দৃশ্যমান থাকে, তবে এটি গোপন হবে; এবং যদি এটি গোপন থাকে, তবে এটি প্রদর্শিত হবে। এটি সাধারণত "show/hide" ফিচারের মতো কাজ করে, তবে এখানে আপনি শুধুমাত্র একটি একক ফাংশন ব্যবহার করতে পারেন।
উদাহরণ:
<button id="toggleButton">Toggle Content</button>
<div id="content" style="display: none;">
<p>এটি কিছু কন্টেন্ট।</p>
</div>
<script>
$(document).ready(function() {
$("#toggleButton").click(function() {
$("#content").toggle(1000); // 1 সেকেন্ডে কন্টেন্টটি টগল হবে
});
});
</script>
এখানে toggle() মেথড ব্যবহার করা হয়েছে, যা কন্টেন্টটিকে 1000 মিলিসেকেন্ডে (1 সেকেন্ড) ধীরে ধীরে প্রদর্শন বা গোপন করবে।
কাস্টমাইজেশন:
- toggle(500): এখানে,
500মানে 500 মিলিসেকেন্ড সময়ের মধ্যে উপাদানটি টগল হবে।
Show, Hide এবং Toggle এর মধ্যে পার্থক্য
- Show: শুধুমাত্র গোপন উপাদানকে দৃশ্যমান করে।
- Hide: প্রদর্শিত উপাদানকে গোপন করে।
- Toggle: উপাদানটি প্রদর্শন বা গোপন করতে সাহায্য করে, অর্থাৎ এটি উভয় প্রক্রিয়া একত্রে করে (প্রদর্শন বা গোপন করা)।
অন্যান্য কাস্টমাইজেশন অপশন
১. Queueing Effects:
jQueryUI Show, Hide এবং Toggle ইফেক্টের জন্য আপনি queue অপশন ব্যবহার করতে পারেন, যা একাধিক অ্যানিমেশন বা ইফেক্ট একে একে কার্যকরী করে।
$("#content").show(1000).hide(1000).toggle(1000);
এটি প্রথমে 1 সেকেন্ডে উপাদানটি দেখাবে, তারপর 1 সেকেন্ডে গোপন করবে এবং শেষে 1 সেকেন্ডে টগল করবে।
২. Callback Functions:
আপনি ইফেক্টের পর একটি callback ফাংশনও ব্যবহার করতে পারেন, যা ইফেক্ট সম্পন্ন হলে কার্যকরী হবে।
$("#content").hide(1000, function() {
alert("কন্টেন্টটি গোপন হয়েছে!");
});
এখানে, কন্টেন্ট গোপন হওয়ার পরে একটি এলার্ট বক্স প্রদর্শিত হবে।
উপসংহার
Show, Hide এবং Toggle ইফেক্টগুলো jQueryUI এর শক্তিশালী অ্যানিমেশন ফিচার, যা আপনার ওয়েবসাইটের উপাদানগুলোকে ব্যবহারকারীদের জন্য আরও ইন্টারেক্টিভ এবং আকর্ষণীয় করে তোলে। আপনি বিভিন্ন সময়কাল এবং কাস্টমাইজেশন অপশন ব্যবহার করে এই ইফেক্টগুলোকে আরও কার্যকরী এবং সুন্দরভাবে উপস্থাপন করতে পারেন। Show, Hide এবং Toggle প্রতিটির নিজস্ব কাজ রয়েছে, এবং এগুলোর সঠিক ব্যবহার আপনাকে দেবে একটি ডাইনামিক এবং ইউজার-বান্ধব ওয়েব পৃষ্ঠা।
Read more
