fadeIn পদ্ধতি

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

বাক্য গঠন

নির্দিষ্ট সময়ের জন্য প্রদর্শন, 400ms ডিফল্টরূপে:

.fadeIn(সময়কাল);

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

.fadeIn('slow' বা 'fast');

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

.fadeIn();

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

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

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

.fadeIn(অপশন);

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

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

উদাহরণ

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

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

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

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

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

উদাহরণ

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

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

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

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

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

আরও দেখুন

fadeOut পদ্ধতি,
যা উপাদানগুলিকে মসৃণভাবে স্বচ্ছ করে লুকায়
show পদ্ধতি,
যা উপাদানগুলিকে মসৃণভাবে প্রদর্শন করে
slideDown পদ্ধতি,
যা উপাদানগুলিকে মসৃণভাবে প্রদর্শন করে