জেকুয়েরি delay() মেথড
সংজ্ঞা এবং ব্যবহার
delay() মেথড লিস্টে থাকা পরবর্তী আইটেমগুলোর এক্সিকিউশনের টাইমার সেট করে দেয়।
সিনট্যাক্স ও ব্যাখ্যা
$(selector).delay(speed,queueName)
প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে delay() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারামিটার | বর্ননা |
|---|---|
| speed | ঐচ্ছিক। delay() স্পিড নির্ধারন করে। সম্ভাব্য ভ্যাল:
|
| queueName | ঐচ্ছিক। সারির নাম নির্দেশ করে। ডিফল্ট এবং স্ট্যান্ডার্ড হচ্ছে "fx"। |
delay() মেথড সংক্রান্ত উদাহরণ
বিভিন্ন <div> এলিমেন্টে delay() মেথডের ব্যবহারঃ
উদাহরণ
<!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(){
$("#firstDiv").delay("slow").fadeIn();
$("#secondDiv").delay("fast").fadeIn();
$("#thirdDiv").delay(800).fadeIn();
$("#fourthDiv").delay(2000).fadeIn();
$("#fifthDiv").delay(4000).fadeIn();
});
});
</script>
</head>
<body>
<p>এই উদাহরনে delay() মেথডের জন্য বিভিন্ন স্পিড ভ্যালু সেট করা হয়েছে।</p>
<button>বক্সে delay সহকারে ফেইড ইন করার জন্য ক্লিক করুন</button>
<br><br>
<div id="firstDiv" style="width:90px;height:90px;display:none;background-color:black;"></div><br>
<div id="secondDiv" style="width:90px;height:90px;display:none;background-color:green;"></div><br>
<div id="thirdDiv" style="width:90px;height:90px;display:none;background-color:blue;"></div><br>
<div id="fourthDiv" style="width:90px;height:90px;display:none;background-color:red;"></div><br>
<div id="fifthDiv" style="width:90px;height:90px;display:none;background-color:purple;"></div>
</body>
</html>
ফলাফল
delay() এবং animate()
কিভাবে একটি এনিমেশনে delay সেট করা যায় তা নিচের উদাহরণে দেখানো হলোঃ
উদাহরণ
<!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(){
$("#animateBtn").click(function(){
$("div").animate({height: "150px"});
$("div").animate({width: "150px"});
$("div").delay(1200).animate({height: "300px"});
});
});
</script>
</head>
<body>
<p>এই উদাহরনে তিনটি মার্জ বক্সসহ animate() মেথড দেখানো হয়েছে।</p>
<p>তৃতীয় বক্সটিতে 1200 মিলিসেকেন্ড delay() সেট করা হয়েছে।</p>
<div style="background:purple;height:75px;width:75px;margin:6px;"></div>
<p><button id="animateBtn">এনিমেশন</button></p>
</body>
</html>
ফলাফল