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

জেকুয়েরি ইফেক্ট show() মেথড

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



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

show() মেথড নির্দিষ্ট হিডেন এলিমেন্টকে সো করে।

নোটঃ show() মেথডের মাধ্যমে জেকুয়েরির কোন মেথড দ্বারা হাইড করা এলিমেন্ট এবং সিএসএসের display:none প্রোপার্টি দ্বারা হাইড করা এলিমেন্টকে প্রদর্শন করে। কিন্তু visibility:hidden প্রোপার্টির বেলায় কাজ করবে না।

টিপস: এলিমেন্ট হাইড করার জন্য hide() মেথড ব্যবহার করুন।


সিনট্যাক্সঃ

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

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

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

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

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

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

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

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

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


show() মেথড সংক্রান্ত উদাহরণ

হাইড হওয়া এলিমেন্টকে প্রদর্শন করার উদাহরণঃ

উদাহরণ

<!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(){
        $(".hideBtn").click(function(){
            $("p").hide();
        });
        $(".showBtn").click(function(){
            $("p").show();
        });
    });
    </script>
  </head>
  <body>

    <h3>hide() মেথডের মাধ্যমে এলিমেন্টকে হাইড করা হয়।</h3>
    <p>এটি একটি প্যারাগ্রাফ।</p>

    <button class="hideBtn">Hide</button>
    <button class="showBtn">Show</button>

</body>
</html>

ফলাফল




show() মেথডে স্পিড প্যারামিটারের ব্যবহার

একটি এলিমেন্ট হাইড করা/ প্রদর্শন করার সময় কিভাবে স্পিড প্যারামিটারের কিভাবে ব্যবহার করা যায়, তা নিচের উদাহরণে দেখানো হলোঃ

উদাহরণ

<!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(){
        $(".hideBtn").click(function(){
            $("p").hide(2000);
        });
        $(".showBtn").click(function(){
            $("p").show(3000);
        });
    });
    </script>
  </head>
  <body>

    <h3>hide() মেথডের মাধ্যমে এলিমেন্টকে হাইড করা হয়।</h3>
    <p style="height:80px; background-color: teal;color: white;">এটি একটি প্যারাগ্রাফ।</p>

    <button class="hideBtn">Hide</button>
    <button class="showBtn">Show</button>

</body>
</html>

ফলাফল




show() মেথডে কলব্যাক প্যারামিটারের ব্যবহার

একটি এলিমেন্ট হাইড করা/ প্রদর্শন করার সময় কিভাবে কলব্যাক প্যারামিটার ব্যবহার করা যায়, তা নিচের উদাহরণে দেখানো হলোঃ

উদাহরণ

<!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(){
        $(".hideBtn").click(function(){
            $("p").hide(2000, function(){
              alert("hide() মেথড সম্পন্ন হয়েছে!");
            });
        });
        $(".showBtn").click(function(){
            $("p").show(3000, function(){
              alert("show() মেথড সম্পন্ন হয়েছে!");
            });
        });
    });
    </script>
  </head>
  <body>

    <h3>hide() মেথডের মাধ্যমে এলিমেন্টকে হাইড করা হয়।</h3>
    <p style="height:80px; background-color: teal;color: white;">এটি একটি প্যারাগ্রাফ।</p>

    <button class="hideBtn">Hide</button>
    <button class="showBtn">Show</button>

</body>
</html>

ফলাফল





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