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

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


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



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

fadeIn() মেথডটি ধীরে ধীরে নির্বাচিত এলিমেন্টের স্পষ্টতা বদলে দেয়।


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

$(selector).fadeIn(speed,easing,callback)

টিপসঃ এই মেথডটি প্রায়ই fadeOut() মেথডের সাথে একত্রে ব্যবহার করা হয়।


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

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

প্যারামিটার বিবরণ
speed ঐচ্ছিক। ফেডিং ইফেক্টের স্পিড নির্ধারন করে। ডিফল্ট ভ্যালু হচ্ছে 400 মিলিসেকেন্ড।

সম্ভাব্য ভ্যালুগুলো হলোঃ

  • milliseconds
  • "slow"
  • "fast"
easing ঐচ্ছিক। বিভিন্ন জায়গা থেকে কোন এলিমেন্টকে এনিমেশন করার স্পিডকে নির্ধারন করে। ডিফল্ট ভ্যালু হচ্ছে "swing"

সম্ভাব্য ভ্যালুগুলো হলো:

  • "swing"
  • "linear"
callback ঐচ্ছিক। fadeIn() মেথডটি সম্পুর্ন হলে এই ফাংশনটি কাজ করবে।

কলব্যাক ফাংশন সম্পর্কে আরো জানতে আমাদের জেকুয়েরি কলব্যাক অধ্যায়ে ভিজিট করুন।


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(){
        $(".fadeOutBtn").click(function(){
            $("div").fadeOut()
        });
        $(".fadeInBtn").click(function(){
            $("div").fadeIn();
        });
    });
    </script>
  </head>
  <body>

    <div style="height: 100px; width: auto; background-color: teal; color: white;">এগুলো সাধারন কিছু টেক্সট।</div>

    <button class="fadeOutBtn">ফেইড-আউট</button>
    <button class="fadeInBtn">ফেইড-ইন</button>

</body>
</html>

ফলাফল




fadeIn() মেথডে speed প্যারামিটারের ব্যবহার

ফেইড-ইন ইফেক্টের স্পিড নির্ধারণ করার জন্য কিভাবে speedপ্যারামিটার ব্যবহার করা হয়, তা নিচের উদাহরণে দেখানো হলোঃ

উদাহরণ

<!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(){
        $(".fadeOutBtn").click(function(){
            $("div").fadeOut(2000)
        });
        $(".fadeInBtn").click(function(){
            $("div").fadeIn(3000);
        });
    });
    </script>
  </head>
  <body>

    <div style="height: 100px; width: auto; background-color: teal; color: white;">এগুলো সাধারন কিছু টেক্সট।</div>

    <button class="fadeOutBtn">ফেইড-আউট</button>
    <button class="fadeInBtn">ফেইড-ইন</button>

</body>
</html>

ফলাফল




fadeIn() মেথডে callback প্যারামিটারের ব্যবহার

ফেইড-ইন এবং আউটের সময় কিভাবে callback প্যারামিটার ব্যবহার করা হয় তা নিচের উদাহরণে দেখানো হলোঃ

উদাহরণ

<!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(){
        $(".fadeOutBtn").click(function(){
            $("div").fadeOut(2000, function(){
              alert("fadeOut() মেথড সম্পন্ন হয়েছে!");
            });
        });
        $(".fadeInBtn").click(function(){
            $("div").fadeIn(3000, function(){
              alert("fadeIn() মেথড সম্পন্ন হয়েছে!");
            });
        });
    });
    </script>
  </head>
  <body>

    <div style="height: 100px; width: auto; background-color: teal; color: white;">এগুলো সাধারন কিছু টেক্সট।</div>

    <button class="fadeOutBtn">ফেইড-আউট</button>
    <button class="fadeInBtn">ফেইড-ইন</button>

</body>
</html>

ফলাফল




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