জেকুয়েরি ইফেক্ট - ফেইড
জেকুয়েরির মাধ্যমে আপনি চাইলে কোনো এলিমেন্টের মধ্যে দৃশ্যমান ফেইড ইন/আউট যুক্ত করতে পারেন।
ফেইড ইন/আউট প্যানেলে ক্লিক করুন
সময়ের মূল্য অনেক বেশি হওয়ায় আমরা ছোট এবং সহজ পাঠের ব্যবস্থা করেছি।
আপনার প্রয়োজনীয় সব কিছুই স্যাট একাডেমীতে খুব সহজ এবং উপযোগী ফরম্যাটে দেওয়া আছে যেন সহজে শিখতে পারেন।
ফেইড মেথড
জেকুয়েরির মাধ্যমে আপনি চাইলে কোনো এলিমেন্টের মধ্যে দৃশ্যমান ফেইড ইন/আউট যুক্ত করতে পারেন।
জেকুয়েরির ফেইড মেথডগুলো নিম্নরূপ:
fadeIn()fadeOut()fadeToggle()fadeTo()
fadeIn() মেথড
fadeIn() মেথডের মাধ্যমে লুকানো এলিমেন্টকে ধীরে ধীরে প্রদর্শন করানো যায়।
সিনট্যাক্সঃ
$(selector).fadeIn(speed,callback);
fadeIn() মেথডের মধ্যে ব্যবহৃত অতিরিক্ত speed প্যারামিটারটি কোনো এলিমেন্টে ফেইড-ইন এর গতি নির্ধারণ করে। এই speed প্যারমিটারটি শুধুমাত্র "slow", "fast" অথবা milliseconds ভ্যালু গ্রহণ করে।
অতিরিক্ত callback প্যারামিটারটি নিজেই একটি ফাংশন, fadeIn() মেথডের কাজ সম্পূর্ণ হলে callback ফাংশনটি এক্সিকিউট হয়। callback ফাংশন সম্মন্ধে পরবর্তী অধ্যায়ে আলোচনা করা হয়েছে।
নিচের উদাহরণে বিভিন্ন প্যারামিটার সহ fadeIn() মেথডের ব্যাখ্যা দেওয়া হলোঃ
উদাহরণ
<!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(){
$("#aquabox").fadeIn();
$("#yellowbox").fadeIn("slow");
$("#tealbox").fadeIn(3000);
});
});
</script>
</head>
<body>
<p>বিভিন্ন প্যারামিটারসহ fadeIn() মেথড দেখানো হলো।</p>
<button>বক্সগুলোতে ফেইড-ইন যুক্ত করার জন্য ক্লিক করুন</button><br><br>
<div id="aquabox" style="width:100px;height:110px;display:none;background-color:aqua;"></div><br>
<div id="yellowbox" style="width:100px;height:110px;display:none;background-color:yellow;"></div><br>
<div id="tealbox" style="width:100px;height:110px;display:none;background-color:teal;"></div>
</body>
</html>
ফলাফল
fadeOut() মেথড
fadeOut() মেথডের মাধ্যমে দৃশ্যমান এলিমেন্টকে ধীরে ধীরে লুকানো যায়।
সিনট্যাক্সঃ
$(selector).fadeOut(speed,callback);
fadeOut() মেথডের মধ্যে ব্যবহৃত অতিরিক্ত speed প্যারামিটারটি কোনো এলিমেন্টে ফেইড-আউটের গতি নির্ধারণ করে। speed প্যারমিটারটি শুধুমাত্র "slow", "fast" অথবা milliseconds ভ্যালু গ্রহণ করে।
অতিরিক্ত callback প্যারামিটারটি নিজেই একটি ফাংশন, fadeOut() মেথডের কাজ সম্পূর্ণ হলে callback ফাংশনটি এক্সিকিউট হয়। callback ফাংশন সম্মন্ধে পরবর্তী অধ্যায়ে আলোচনা করা হয়েছে।
নিচের উদাহরণে বিভিন্ন প্যারামিটারের মাধ্যমে fadeOut() মেথডের ব্যাখ্যা দেওয়া হলোঃ
উদাহরণ
<!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(){
$("#yellowbox").fadeOut();
$("#redbox").fadeOut("slow");
$("#aquabox").fadeOut(3000);
});
});
</script>
</head>
<body>
<p>বিভিন্ন প্যারামিটারসহ fadeOut() মেথড দেখানো হলো।</p>
<button>বক্সগুলোতে ফেইড-আউট যুক্ত করার জন্য ক্লিক করুন</button><br><br>
<div id="yellowbox" style="width:100px;height:110px;background-color:yellow;"></div><br>
<div id="redbox" style="width:100px;height:110px;background-color:red;"></div><br>
<div id="aquabox" style="width:100px;height:110px;background-color:aqua;"></div>
</body>
</html>
ফলাফল
fadeToggle() মেথড
fadeToggle() মেথডের মাধ্যমে fadeIn() এবং fadeOut() মেথডের মধ্যে টোগল করা হয়।
অর্থাৎ লুকানো এলিমেন্টকে ধীরে ধীরে দৃশ্যমান করবে এবং দৃশ্যমান এলিমেন্টকে ধীরে ধীরে লুকিয়ে ফেলবে।
সিনট্যাক্সঃ
$(selector).fadeToggle(speed,callback);
fadeToggle() মেথডের মধ্যে ব্যবহৃত অতিরিক্ত speed প্যারামিটারটি কোনো এলিমেন্টে ফেইড ইন/আউট এর গতি নির্ধারণ করে। speed প্যারমিটারটি শুধুমাত্র "slow", "fast" অথবা milliseconds ভ্যালু গ্রহণ করে।
অতিরিক্ত callback প্যারামিটারটি নিজেই একটি ফাংশন, fadeToggle() মেথডের কাজ সম্পূর্ণ হলে callback ফাংশনটি এক্সিকিউট হয়। callback ফাংশন সম্মন্ধে পরবর্তী অধ্যায়ে আলোচনা করা হয়েছে।
নিচের উদাহরণে বিভিন্ন প্যারামিটারের সহ fadeToggle() মেথডের ব্যাখ্যা দেওয়া হলোঃ
উদাহরণ
<!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(){
$("#yellowbox").fadeToggle();
$("#tealbox").fadeToggle("slow");
$("#bluebox").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>বিভিন্ন স্পিড প্যারামিটারসহ fadeToggle() মেথড দেখানো হলো।</p>
<button>বক্সগুলোকে ফেইড ইন/আউট করার জন্য ক্লিক করুন</button><br><br>
<div id="yellowbox" style="width:100px;height:110px;background-color:yellow;"></div><br>
<div id="tealbox" style="width:100px;height:110px;background-color:teal;"></div><br>
<div id="bluebox" style="width:100px;height:110px;background-color:blue;"></div>
</body>
</html>
ফলাফল
fadeTo() মেথড
fadeTo() মেথডের মাধ্যমে একটি রেঞ্জ যেমন- 0 এবং 1 এর মধ্যবর্তী মান দিয়ে কোনো এলিমেন্টকে স্পষ্ট/অস্পষ্ট করা যায়।
সিনট্যাক্সঃ
$(selector).fadeTo(speed,opacity,callback);
fadeTo() মেথডের মধ্যে ব্যবহৃত অতিরিক্ত speed প্যারামিটারটি কোনো এলিমেন্টকে ফেড হওয়ার গতি নির্ধারণ করে। speed প্যারমিটারটি শুধুমাত্র "slow", "fast" অথবা milliseconds ভ্যালু করে।
fadeTo() মেথডের মধ্যে আবশ্যক opacity প্যারামিটার একটি রেঞ্জ যেমন- 0 এবং 1 এর মধ্যবর্তী মান দিয়ে কোনো এলিমেন্টকে স্পষ্ট/অস্পষ্ট করে।
অতিরিক্ত callback প্যারামিটারটি নিজেই একটি ফাংশন, fadeTo() মেথডের কাজ সম্পূর্ণ হলে callback ফাংশনটি এক্সিকিউট হয়।
নিচের উদাহরণে বিভিন্ন প্যারামিটারের মাধ্যমে fadeTo() মেথডের ব্যাখ্যা দেওয়া হলোঃ
উদাহরণ
<!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(){
$("#yellowbox").fadeTo("slow", 0.15);
$("#tealbox").fadeTo("slow", 0.4);
$("#redbox").fadeTo("slow", 0.7);
});
});
</script>
</head>
<body>
<p>বিভিন্ন প্যারামিটারসহ fadeTo() মেথড দেখানো হলো।</p>
<button>বক্স ফেইড করার জন্য এখানে ক্লিক করুন</button><br><br>
<div id="yellowbox" style="width:100px;height:110px;background-color:yellow;"></div><br>
<div id="tealbox" style="width:100px;height:110px;background-color:teal;"></div><br>
<div id="redbox" style="width:100px;height:110px;background-color:red;"></div>
</body>
</html>
ফলাফল
জেকুয়েরি ইফেক্ট রেফারেন্স
জেকুয়েরি ইফেক্টের সম্পূর্ণ রেফারেন্সের জন্য আমাদের জেকুয়েরি ইফেক্ট রেফারেন্স পেজে ভিজিট করুন।