fadeOut পদ্ধতি

fadeOut পদ্ধতি উপাদানগুলিকে মসৃণভাবে লুকিয়ে দেয়। উপাদানগুলি দেখানো যেতে পারে fadeIn পদ্ধতি ব্যবহার করে, সেগুলিকে অস্বচ্ছ করে।

বাক্য গঠন

নির্দিষ্ট সময়ের জন্য দেখানো, পূর্বনির্ধারিত হল 400ms:

javascript.fadeOut(সময়কাল);

সময় কেবল মিলিসেকেন্ডেই নয়, বরং কীওয়ার্ড দিয়েও নির্দিষ্ট করা যেতে পারে slow (600ms) এবং fast (200ms), মান যত বেশি, অ্যানিমেশন তত ধীর:

javascript.fadeOut('slow' বা 'fast');

যদি কোনো প্যারামিটার নির্দিষ্ট না করা হয় - অ্যানিমেশন চালানো হবে না, উপাদানগুলি তাত্ক্ষণিকভাবে লুকিয়ে যাবে:

javascript.fadeOut();

দ্বিতীয় প্যারামিটার হিসাবে ইজিং ফাংশনও পাস করা যেতে পারে, এবং তৃতীয়টি হিসাবে কলব্যাক ফাংশন - অ্যানিমেশন সম্পূর্ণ হওয়ার পরে কার্যকর হবে। উভয় প্যারামিটারই ঐচ্ছিক:

javascript.fadeOut(সময়কাল, [ইজিং ফাংশন], [কলব্যাক ফাংশন]);

পদ্ধতিতে বিভিন্ন বিকল্প পাস করা যেতে পারে, জাভাস্ক্রিপ্ট অবজেক্ট আকারে, যাতে রয়েছে কী: মান জোড়া:

javascript.fadeOut(অপশন);

এই ধরনের একটি অবজেক্ট নিম্নলিখিত প্যারামিটার এবং ফাংশনগুলি পাস করতে পারে - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always। এই প্যারামিটারগুলির বর্ণনা আপনি animate পদ্ধতির জন্য দেখতে পারেন। উদাহরণস্বরূপ, আসুন সময়কাল এবং ইজিং ফাংশন সেট করি:

javascript.fadeOut( {duration: 800, easing: easeInSine} );

উদাহরণ

নিম্নলিখিত উদাহরণে বাটনে ক্লিক করলে #hide উপাদানটি #test fadeOut পদ্ধতি ব্যবহার করে লুকিয়ে যাবে, এবং #show বাটনে - দেখানো হবে, fadeIn ব্যবহার করে। আমরা গতি 1000ms এ সেট করব:

html<button id="hide">লুকান</button>
<button id="show">দেখান</button>
<div id="test"></div>

css#test {
  width: 200px;
  height: 200px;
  background: green;
  color: white;
  margin-top: 10px;
}

javascript$('#show').on('click', function() {
  $('#test').fadeIn(1000);
});

$('#hide').on('click', function() {
  $('#test').fadeOut(1000);
});

উদাহরণ

এবং নিম্নলিখিত উদাহরণে অ্যানিমেশন শেষ হওয়ার পরে #test উপাদানটি দেখানোর সময় আমরা '!' টেক্সট সহ একটি বার্তা দেখাব, আর লুকানোর সময় '?' টেক্সট সহ:

html<button id="hide">লুকান</button>
<button id="show">দেখান</button>
<div id="test"></div>

css#test {
  width: 200px;
  height: 200px;
  background: green;
  color: white;
  margin-top: 10px;
}

javascript$('#show').on('click', function() {
  $('#test').fadeIn(1000, function() {
    alert('!');
  });
});

$('#hide').on('click', function() {
  $('#test').fadeOut(1000, function() {
    alert('?');
  });
});

আরও দেখুন