জেকুয়েরি ইফেক্ট - স্লাইডিং
জেকুয়েরি স্লাইড মেথডের মাধ্যমে কোন একটি এলিমেন্টকে উপর/নিচে স্লাইড করা যায়।
প্যানেলটিকে উপর/নিচে স্লাইড করার জন্য এখানে ক্লিক করুন
সময়ের মূল্য অনেক বেশি হওয়ায় আমরা ছোট এবং সহজ পাঠের ব্যবস্থা করেছি।
আপনার প্রয়োজনীয় সব কিছুই স্যাট একাডেমীতে খুব সহজ এবং উপযোগী ফরম্যাটে দেওয়া আছে যেন সহজে শিখতে পারেন।
জেকুয়েরি স্লাইডিং মেথড
জেকুয়েরির মাধ্যমে আপনি চাইলে একটি এলিমেন্টের মধ্যে স্লাইডিং এফেক্ট তৈরি করতে পারবেন।
জেকুয়েরিতে নিম্নলিখিত স্লাইড মেথডগুলো রয়েছেঃ
slideDown()slideUp()slideToggle()
জেকুয়েরি slideDown() মেথড
জেকুয়েরি slideDown() মেথড একটি এলিমেন্টকে নিচে স্লাইড করে।
সিনট্যাক্সঃ
$(selector).slideDown(speed,callback);
slideDown() মেথডের মধ্যে ব্যবহৃত অতিরিক্ত speed প্যারামিটারটি কোনো এলিমেন্ট নিচের দিকে স্লাইড হওয়ার গতি নির্ধারণ করে। এই speed প্যারমিটারটি শুধুমাত্র "slow", "fast" অথবা milliseconds ভ্যালু গ্রহণ করে।
অতিরিক্ত callback প্যারামিটারটি নিজেই একটি ফাংশন, slideDown() মেথডের কাজ সম্পূর্ণ হলে callback ফাংশনটি এক্সিকিউট হয়।
নিচের উদাহরণে বিভিন্ন প্যারামিটারের মাধ্যমে slideDown() মেথডের ব্যাখ্যা দেওয়া হলোঃ
উদাহরণ
<!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(){
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: aqua;
border: solid 1px green;
color: red;
}
#panel {
padding: 50px;
display: none;
}
</style>
</head>
<body>
<div id="flip">স্লাইড ডাউন প্যানেলে যেতে ক্লিক করুন।</div>
<div id="panel">স্যাট একাডেমীর সাথেই থাকুন</div>
</body>
</html>
ফলাফল
জেকুয়েরি slideUp() মেথড
জেকুয়েরি slideUp() মেথড একটি এলিমেন্টকে উপর দিকে স্লাইড করে।
সিনট্যাক্সঃ
$(selector).slideUp(speed,callback);
slideUp() মেথডের মধ্যে ব্যবহৃত অতিরিক্ত speed প্যারামিটারটি কোনো এলিমেন্টকে উপর দিকে স্লাইড হওয়ার গতি নির্ধারণ করে। এই speed প্যারমিটারটি শুধুমাত্র "slow", "fast" অথবা milliseconds ভ্যালু গ্রহণ করে।
অতিরিক্ত callback প্যারামিটারটি নিজেই একটি ফাংশন, slideUp() মেথডের কাজ সম্পূর্ণ হলে callback ফাংশনটি এক্সিকিউট হয়।
নিচের উদাহরণে বিভিন্ন প্যারামিটারের মাধ্যমে slideUp() মেথডের ব্যাখ্যা দেওয়া হলোঃ
উদাহরণ
<!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(){
$("#flip").click(function(){
$("#panel").slideUp("slow");
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: aqua;
border: solid 1px green;
color: red;
}
#panel {
padding: 50px;
}
</style>
</head>
<body>
<div id="flip">প্যানেলকে উপরে স্লাইড করার জন্য ক্লিক করুন</div>
<div id="panel">স্যাট একাডেমির সাথেই থাকুন!</div>
</body>
</html>
ফলাফল
জেকুয়েরি slideToggle() মেথড
slideToggle() মেথড slideDown() এবং slideUp() মেথডের মধ্যে টোগল করে।
যদি এলিমেন্টটি নিচে স্লাইড অবস্থায় থাকে তবে slideToggle() মেথড এটিকে উপরে স্লাইড করবে।
আর যদি এলিমেন্টটি উপরে স্লাইড অবস্থায় থাকে তবে slideToggle() মেথড এটিকে নিচে স্লাইড করবে।
সিনট্যাক্সঃ
$(selector).slideToggle(speed,callback);
speed প্যারমিটারটি শুধুমাত্র "slow", "fast" অথবা milliseconds ভ্যালু গ্রহণ করে।
অতিরিক্ত callback প্যারামিটারটি নিজেই একটি ফাংশন, স্লাইডিং সম্পূর্ণ হলে এই callback ফাংশনটি এক্সিকিউট হয়।
নিচের উদাহরণে প্যারামিটারসহ slideToggle() মেথডের ব্যাখ্যা দেওয়া হলোঃ
উদাহরণ
<!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(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: aqua;
border: solid 1px green;
color: red;
}
#panel {
padding: 50px;
display: none;
}
</style>
</head>
<body>
<div id="flip">নিচে অথবা উপরে স্লাইড করার জন্য প্যানেলে ক্লিক করুন</div>
<div id="panel">স্যাট একাডেমীর সাথেই থাকুন!</div>
</body>
</html>
ফলাফল
জেকুয়েরি ইফেক্ট রেফারেন্স
জেকুয়েরি ইফেক্টের সম্পূর্ণ রেফারেন্সের জন্য আমাদের জেকুয়েরি ইফেক্ট রেফারেন্স পেজে ভিজিট করুন।