জেকুয়েরি queue() মেথড
সংজ্ঞা এবং ব্যবহার
queue() মেথডটি নির্দিষ্ট এলিমেন্টে এক্সিকিউট হবে এমন ফাংশনের queue প্রদর্শন করে।
একটি queue তে অনেকগুলো ফাংশন থাকতে পারে।
queue() মেথডটি dequeue()মেথডের সাথে ব্যবহার করা যেতে পারে।
একটি এলিমেন্টের অনেকগুলো queue থাকতে পারে। তবে বেশিরভাগ ক্ষেত্রেই একটি থাকে যেটি হলো "fx" এবং এটি জেকুয়েরির ডিফল্ট queue ।
সিনট্যাক্সঃ
$(selector).queue(queueName)
প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে queue() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারামিটার | বিবরণ |
|---|---|
queueName |
ঐচ্ছিক। queue এর নামকে নির্দেশ করে।
ডিফল্ট queue হচ্ছে |
queue() মেথড সংক্রান্ত উদাহরণ
<span> এলিমেন্টের queue length প্রদর্শনঃ
উদাহরণ
<!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(){
var div = $("div");
div.animate({height: 200}, 800);
div.animate({width: 200}, 1300);
div.animate({height: 100}, 1800);
div.animate({width: 100}, 2300);
$("span").text(div.queue().length);
});
});
</script>
</head>
<body>
<button>এনিমেশন শুরু করুন</button>
<p>queue length: <span></span></p>
<div style="width:50px;height:50px;position:absolute;left:10px;top:100px;background-color:teal;"></div>
</body>
</html>
ফলাফল
queue() রিলেটেড মেথডগুলোর একত্র ব্যবহার
কিভাবে queue(), dequeue() এবং clearQueue() মেথড একত্রে ব্যবহার করা যায় তা নিচের উদাহরণের মাধ্যমে দেখানো হলোঃ
উদাহরণ
<!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(){
var div = $("div");
$("#startAnimation").click(function(){
div.animate({height: 300}, "slow");
div.animate({width: 300}, "slow");
div.queue(function () {
div.css("background-color", "red");
div.dequeue();
});
div.animate({height: 100}, "slow");
div.animate({width: 100}, "slow");
});
$("#stopAnimation").click(function(){
div.clearQueue();
});
});
</script>
</head>
<body>
<p>queue() মেথড ঐ ফাংশনগুলোকে সরবরাহ করে, যেগুলো নির্বাচিত এলিমেন্টে এক্সিকিউট হবে।</p>
<p>dequeue() মেথড সারিকৃত ফাংশনগুলোকে রিমোভ করে এবং মূল ফাংশনটি এক্সিকিউট করে।</p>
<p>clearQueue() মেথড যে ফাংশনগুলো এখনো রান হয়নি সেগুলোকে রিমোভ করে।<p>
<p>
<button id="startAnimation">এনিমেশন শুরু করুন</button>
<button id="stopAnimation">এনিমেশন বন্ধ করুন</button>
</p>
<div style="background:#98bf21;height:100px;width:100px;position:relative"></div>
</body>
</html>
ফলাফল
queue() এর length গননা এবং queue লুপ করা
কিভাবে queue এর length গননা করা যায় এবং queue লুপ করা যায় তা নিচের উদাহরণে দেখানো হলোঃ
উদাহরণ
<!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(){
var div = $("div");
animationStart();
queueShow();
function animationStart(){
div.animate({height: 200}, 2000);
div.animate({width: 200}, 2000);
div.animate({height: 100}, 2000);
div.animate({width: 100}, 2000, animationStart);
}
function queueShow(){
var q = div.queue();
$("span").text(q.length);
setTimeout(queueShow);
}
});
});
</script>
</head>
<body>
<button>এনিমেশন শুরু করুন</button>
<p>queue length: <span></span></p>
<div style="width:50px;height:50px;position:absolute;left:10px;top:100px;background-color:teal;"></div>
</body>
</html>
ফলাফল