জেকুয়েরি জাভাস্ক্রিপ্ট এঙ্গুলার এইচটিএমএল সিএসএস বুটস্ট্রাপ
লগইন
 

জেকুয়েরি delay() মেথড

« জেকুয়েরি ইফেক্ট মেথডসমূহ



সংজ্ঞা এবং ব্যবহার

delay() মেথড লিস্টে থাকা পরবর্তী আইটেমগুলোর এক্সিকিউশনের টাইমার সেট করে দেয়।


সিনট্যাক্স ও ব্যাখ্যা

$(selector).delay(speed,queueName)

প্যারামিটার ও তাদের ভ্যালু

নিচের টেবিলে delay() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ

প্যারামিটার বর্ননা
speed ঐচ্ছিক। delay() স্পিড নির্ধারন করে।

সম্ভাব্য ভ্যাল:

  • milliseconds
  • "slow"
  • "fast"
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>

ফলাফল




« জেকুয়েরি ইফেক্ট মেথডসমূহ