এই পোস্টটি একটি মসৃণ ফেইড-আউট প্রভাব তৈরির জন্য jQuery-এর fadeOut() পদ্ধতির ব্যবহারিক বাস্তবায়ন ব্যাখ্যা করবে।
কিভাবে jQuery এর fadeOut() পদ্ধতি ব্যবহার করে মসৃণ ফেইড-আউট প্রভাব তৈরি করবেন?
jQuery এর ' বিবর্ণ() ” পদ্ধতিটি নির্বাচিত উপাদানটিকে ধীরে ধীরে এর অস্বচ্ছতা হ্রাস করে লুকিয়ে রাখে। এই পদ্ধতিটি নির্বাচিত উপাদানের অবস্থাকে দৃশ্যমান থেকে লুকানো অবস্থায় পরিবর্তন করে। লুকানো উপাদানটি ওয়েব পৃষ্ঠায় প্রদর্শিত হয় না যতক্ষণ না ব্যবহারকারী এটি ব্যবহার করে আবার প্রদর্শন করে “ বিবর্ণ() 'পদ্ধতি।
বাক্য গঠন
$ ( নির্বাচক ) . বিবর্ণ ( গতি, সহজীকরণ, কলব্যাক ) ;
উপরের সিনট্যাক্স ফেড-আউট প্রভাব কাস্টমাইজ করতে নিম্নলিখিত ঐচ্ছিক পরামিতি সমর্থন করে:
- গতি: এটি মিলিসেকেন্ডে বিবর্ণ প্রভাবের গতি নির্দিষ্ট করে। ডিফল্টরূপে এর মান হল '400ms'। তাছাড়া, এটি দুটি অন্তর্নির্মিত মান 'ধীর' এবং 'দ্রুত' সমর্থন করে।
- সহজ করা: এটি বিভিন্ন পয়েন্টে বিবর্ণ অ্যানিমেশন গতি দেখায়। ডিফল্টভাবে এর মান হল 'সুইং (শুরুতে/শেষে ধীর এবং মাঝখানে ধীর)'। উপরন্তু, এটি 'রৈখিক (বিবর্ণ অ্যানিমেশনে ধ্রুবক গতি)' এও কাজ করে।
- কলব্যাক: এটি একটি ব্যবহারকারী-সংজ্ঞায়িত ফাংশন সংজ্ঞায়িত করে যা সংজ্ঞায়িত কাজটি সম্পাদন করার জন্য বিবর্ণ অ্যানিমেশন সম্পূর্ণ করার পরে কার্যকর করে।
উপরোক্ত সংজ্ঞায়িত পদ্ধতি ব্যবহারিকভাবে ব্যবহার করা যাক।
HTML কোড
'fadeOut()' পদ্ধতিতে যাওয়ার আগে, নিম্নলিখিত HTML কোডটি দেখুন যা একটি নমুনা 'div' উপাদান তৈরি করে যার উপর ফেইড-আউট প্রভাব সঞ্চালিত হবে:
< বোতাম > বিবর্ণ ( লুকান উপাদান ) বোতাম < br < br >< ডিভি আইডি = 'myDiv' শৈলী = 'উচ্চতা: 80px; প্রস্থ: 300px; সীমানা: 2px কঠিন কালো; মার্জিন: স্বয়ংক্রিয়; পাঠ্য-সারিবদ্ধ: কেন্দ্র' >
< h2 > Linuxhint-এ স্বাগতম h2 >
div >
কোডের উপরের লাইনগুলিতে:
- দ্য ' <বোতাম> ” ট্যাগ একটি বোতাম উপাদান যোগ করে।
- দ্য ' ' ট্যাগ 'myDiv' আইডি সহ একটি div উপাদান তৈরি করে এবং নিম্নলিখিত স্টাইলিং বৈশিষ্ট্যগুলির সাহায্যে স্টাইল করা হয় (উচ্চতা, প্রস্থ, সীমানা, মার্জিন, পাঠ্য-সারিবদ্ধ)।
- ডিভের ভিতরে, ' ” ট্যাগ লেভেল 2-এর প্রথম উপশিরোনাম উপাদানটি নির্দিষ্ট করে।
এখন, প্রথম উদাহরণ দিয়ে শুরু করুন।
উদাহরণ 1: fadeOut() ডিফল্ট মান দিয়ে মসৃণ ফেইড-আউট প্রভাব তৈরি করুন
প্রথম উদাহরণটি ডিফল্ট মান '400ms' সহ 'fadeOut()' পদ্ধতি ব্যবহার করে মিলে যাওয়া div উপাদানটিকে লুকিয়ে রাখে:
< লিপি >
$ ( নথি ) . প্রস্তুত ( ফাংশন ( ) {
$ ( 'বোতাম' ) . ক্লিক ( ফাংশন ( ) {
$ ( '#myDiv' ) . বিবর্ণ ( ) ;
} ) ;
} ) ;
লিপি >উপরের কোড লাইনে:
- প্রথমত, ' প্রস্তুত() বর্তমান এইচটিএমএল ডকুমেন্ট/ডোম লোড হলে পদ্ধতি প্রদত্ত ফাংশনগুলি সম্পাদন করে।
- পরবর্তী, ' ক্লিক() ' পদ্ধতিটি লিঙ্কযুক্ত ফাংশনটি বোতামে ক্লিক করার পরে কার্যকর করে যখন এর সম্পর্কিত 'বোতাম' নির্বাচক ক্লিক করা হয়।
- এর পরে, ' বিবর্ণ() ' পদ্ধতি অ্যাক্সেস করা ডিভ উপাদানটিকে লুকিয়ে রাখে যার আইডি হল 'myDiv' 400ms অর্থাৎ ডিফল্ট মান।
আউটপুট
এটি দেখা যায় যে প্রদত্ত বোতাম ক্লিকটি '400ms' এ ধীরে ধীরে ডিভ উপাদানটিকে বিবর্ণ করে দেয়।
উদাহরণ 2: fadeOut() 'স্পীড' প্যারামিটার দিয়ে মসৃণ ফেইড-আউট প্রভাব তৈরি করুন
এই উদাহরণটি 'স্পীড' প্যারামিটারের অন্তর্নির্মিত মান (ধীর/দ্রুত) সহ 'fadeOut()' পদ্ধতি ব্যবহার করে:
< লিপি >
$ ( নথি ) . প্রস্তুত ( ফাংশন ( ) {
$ ( 'বোতাম' ) . ক্লিক ( ফাংশন ( ) {
$ ( '#myDiv' ) . বিবর্ণ ( 'ধীর' ) ;
} ) ;
} ) ;
লিপি >এখন ' বিবর্ণ() 'পদ্ধতি পাস করে' ধীর মসৃণভাবে ফেইডিং আউট এফেক্ট তৈরি করার জন্য এর প্যারামিটার হিসাবে মানটি যেমন নির্বাচিত ডিভ উপাদানের অবস্থা দৃশ্যমান থেকে লুকানো অবস্থায় পরিবর্তন করে।
আউটপুট
এটি দেখা যায় যে নির্বাচিত ডিভ উপাদানটি বোতাম ক্লিকে ধীরে ধীরে লুকিয়ে যায়।
উদাহরণ 3: fadeOut() 'সময়কাল' প্যারামিটার দিয়ে মসৃণ ফেইড-আউট প্রভাব তৈরি করুন
এই উদাহরণটি 'fadeOut()' পদ্ধতিটি নির্দিষ্ট সংখ্যক মিলিসেকেন্ডের সময়কাল পরামিতি হিসাবে প্রয়োগ করে:
< লিপি >
$ ( নথি ) . প্রস্তুত ( ফাংশন ( ) {
$ ( 'বোতাম' ) . ক্লিক ( ফাংশন ( ) {
$ ( '#myDiv' ) . বিবর্ণ ( 6000 ) ;
} ) ;
} ) ;
লিপি >এখন, 'fadeOut()' পদ্ধতিটি নির্দিষ্ট সময়ের মধ্যে মিলিত উপাদান লুকানোর জন্য মিলিসেকেন্ডের নির্দিষ্ট সংখ্যা ব্যবহার করে।
আউটপুট
উপরের আউটপুট একটি নির্দিষ্ট সময়ের ব্যবধানে একটি বোতামে ক্লিক করার পর প্রদত্ত ডিভ উপাদানের পরিবর্তনগুলি লুকিয়ে রাখে।
উদাহরণ 4: fadeOut() 'কলব্যাক' ফাংশন দিয়ে মসৃণ ফেইড-আউট প্রভাব তৈরি করুন
এই উদাহরণটি 'fadeOut()' পদ্ধতির মাধ্যমে ফেইড-আউট প্রভাব সম্পূর্ণ করার পরে একটি কলব্যাক ফাংশন চালায়:
< লিপি >
$ ( নথি ) . প্রস্তুত ( ফাংশন ( ) {
$ ( 'বোতাম' ) . ক্লিক ( ফাংশন ( ) {
$ ( '#myDiv' ) . বিবর্ণ ( 4000 , ফাংশন ( ) {
কনসোল লগ ( 'প্রদত্ত div উপাদান সফলভাবে লুকান হয়!' )
} ) ;
} ) ;
} ) ;
লিপি >উল্লিখিত কোড ব্লকে:
- দ্য ' বিবর্ণ() ” পদ্ধতিটি মিলিত ডিভ উপাদানকে মিলিসেকেন্ডের একটি নির্দিষ্ট সংখ্যায় বিবর্ণ করে দেয় এবং তারপর প্রদত্ত 'কলব্যাক' ফাংশনটি কার্যকর করে।
- ভিতরে ' কলব্যাক 'ফাংশন, ' console.log() 'ফেড-আউট' প্রভাব সমাপ্তির পরে নির্দিষ্ট বিবৃতি প্রদর্শন করার জন্য পদ্ধতি প্রয়োগ করা হয়।
আউটপুট
এটি দেখা যায় যে 'কনসোল' প্রদত্ত ডিভ উপাদানটি লুকানোর পরে কলব্যাক ফাংশনে সংজ্ঞায়িত একটি বিবৃতি দেখায়।
উদাহরণ 5: ফেডআউট() 'ইজিং' প্যারামিটার দিয়ে মসৃণ ফেইড-আউট প্রভাব তৈরি করুন
এই উদাহরণটি 'ইজিং' প্যারামিটারের সম্ভাব্য মানগুলির সাথে 'fadeOut()' পদ্ধতি প্রয়োগ করে:
< লিপি >
$ ( নথি ) . প্রস্তুত ( ফাংশন ( ) {
$ ( 'বোতাম' ) . ক্লিক ( ফাংশন ( ) {
$ ( '#myDiv' ) . বিবর্ণ ( 4000 , 'রৈখিক' ) ;
} ) ;
} ) ;
লিপি >এখন ' বিবর্ণ() ' পদ্ধতি একটি নির্দিষ্ট সংখ্যক মিলিসেকেন্ডে একটি ধ্রুবক গতিতে ফেইড আউট প্রভাব সম্পাদন করে কারণ ' রৈখিক 'মান।
আউটপুট
আউটপুট একটি ধ্রুবক গতিতে প্রদত্ত উপাদানের অবস্থাকে দৃশ্যমান থেকে লুকানো অবস্থায় পরিবর্তন করে। এটি উপাদানটিতে 'ফেইড-আউট' প্রভাব বাস্তবায়নের জন্য।
উপসংহার
jQuery এর ' ব্যবহার করে একটি মসৃণ ফেইড-আউট প্রভাব তৈরি করতে বিবর্ণ() ” পদ্ধতি, ব্যবহারকারীর কোন অতিরিক্ত পরামিতি প্রয়োজন হয় না। এই পদ্ধতিটি বিবর্ণ হয়ে যায় অর্থাৎ উপাদানটিকে ধীরে ধীরে অস্বচ্ছতা পরিবর্তন করে লুকিয়ে রাখে। ব্যবহারকারীর যদি মিলিসেকেন্ডের নির্দিষ্ট সংখ্যায় একটি ফেডিং-আউট প্রভাব সঞ্চালনের প্রয়োজন হয়, একটি কলব্যাক ফাংশন চালান তারপর 'fadeOut()' পদ্ধতির সাথে 'স্পীড', 'ইজিং', এবং 'কলব্যাক' প্যারামিটার ব্যবহার করুন। এই পোস্টটি কার্যত একটি মসৃণ ফেইড-আউট প্রভাব তৈরির জন্য jQuery-এর fadeOut() পদ্ধতি ব্যাখ্যা করেছে।