জেকুয়েরি ইফেক্ট হাইড এবং শো
Hide(), Show(), Toggle(), Slide(), Fade(), Animate() ইত্যাদি মেথডের ব্যবহার খুবই সহজ।
প্যানেলটি হাইড/প্রদর্শন করতে ক্লিক করুন
সময়ের মূল্য অনেক বেশি হওয়ায় আমরা ছোট এবং সহজ পাঠের ব্যবস্থা করেছি।
আপনার প্রয়োজনীয় সব কিছুই স্যাট একাডেমীতে খুব সহজ এবং উপযোগী ফরম্যাটে দেওয়া আছে যেন আপনি সহজে শিখতে পারেন।
hide() এবং show() মেথড
জেকুয়েরি hide() এবং show() মেথডের মাধ্যমে আপনি এইচটিএমএল এলিমেন্টকে যথাক্রমে অদৃশ্য এবং দৃশ্যমান করতে পারেনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি hide() এবং show() মেথড এর উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>আপনি যদি "হাইড" বাটনে ক্লিক করেন, তাহলে আমি লুকিয়ে যাবো।</p>
<button id="hide">হাইড</button>
<button id="show">শো</button>
</body>
</html>
ফলাফল
সিনট্যাক্সঃ
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
hide()/show() মেথডের মধ্যে ব্যবহৃত অতিরিক্ত speed প্যারামিটারটি কোনো এলিমেন্টকে হাইড/প্রদর্শন করার গতি নির্ধারণ করে এবং speed প্যারমিটারটি শুধুমাত্র "slow", "fast", অথবা millisecond ভ্যালু গ্রহণ করে।
অতিরিক্ত callback প্যারামিটারটি নিজেই একটি ফাংশন, hide()/show() মেথডের কাজ সম্পূর্ণ হলে callback ফাংশনটি এক্সিকিউট হয়। callback ফাংশন সম্মন্ধে পরবর্তী অধ্যায়ে আলোচনা করা হয়েছে।
নিচের উদাহরণে hide() মেথডের মধ্যে speedপ্যারামিটারের ব্যবহার দেখানো হয়েছেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1500);
});
});
</script>
</head>
<body>
<button>হাইড</button>
<p>এটি একটি ছোট প্যারাগ্রাফ।</p>
<p>এটি আরেকটি ছোট প্যারাগ্রাফ।</p>
</body>
</html>
ফলাফল
toggle() মেথড
toggle() মেথডের মাধ্যমে hide() এবং show() মেথডের মধ্যে টোগল করা হয়।
অর্থাৎ হিডেন এলিমেন্টকে প্রদর্শন করা যাবে এবং প্রদর্শিত এলিমেন্টকে হাইড করা যাবেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<button>প্যারাগ্রাফ হাইড এবং প্রদর্শনীর জন্য টোগল করুন</button>
<p>স্যাট একাডেমীতে সম্পূর্ণ ফ্রীতে প্রোগ্রামিং শিক্ষা দেওয়া হয়।</p>
<p>স্যাট একাডেমীর ওয়েবসাইট বাংলাদশের বৃহত্তম অনলাইন প্রোগ্রামিং শিক্ষার ওয়েবসাইট।</p>
</body>
</html>
ফলাফল
সিনট্যাক্স:
$(selector).toggle(speed,callback);
toggle() মেথডের মধ্যে ব্যবহৃত অতিরিক্ত speed প্যারামিটারটি কোনো এলিমেন্টকে হাইড/প্রদর্শন করার গতি নির্ধারণ করে এবং speed প্যারমিটারটি শুধুমাত্র "slow", "fast" অথবা milliseconds ভ্যালু গ্রহণ করে।
অতিরিক্ত callback প্যারামিটারটি নিজেই একটি ফাংশন, toggle() মেথডের কাজ সম্পূর্ণ হলে callback ফাংশনটি এক্সিকিউট হয়। callback ফাংশন সম্মন্ধে পরবর্তী অধ্যায়ে আলোচনা করা হয়েছে।
জেকুয়েরি ইফেক্ট রেফারেন্স
জেকুয়েরি ইফেক্টের সম্পূর্ণ রেফারেন্সের জন্য আমাদের জেকুয়েরি ইফেক্ট রেফারেন্স পেজে ভিজিট করুন।