এই পোস্টটি jQuery-এ hide() এবং fadeOut(), show(), এবং fadeIn() এর মধ্যে মূল পার্থক্য তুলে ধরে।
jQuery-তে hide() এবং fadeOut(), show() এবং fadeIn() এর মধ্যে পার্থক্যের দিকে যাওয়ার আগে, প্রথমে নিম্নলিখিত গাইডগুলি পড়ে এই পদ্ধতিগুলির মূল বিষয়গুলি দেখুন:
- jQuery এর fadeIn() পদ্ধতি
- jQuery এর fadeOut() পদ্ধতি
- জাভাস্ক্রিপ্ট JQuery হাইড() পদ্ধতি | ব্যাখ্যা করেছেন
- JQuery শো() পদ্ধতি | ব্যাখ্যা করেছেন
প্রথমে, jQuery-এ hide() এবং fadeOut() পদ্ধতির মধ্যে পার্থক্য দেখুন।
jQuery এ hide() এবং fadeOut() এর মধ্যে পার্থক্য করুন
এর মধ্যে একমাত্র এবং একমাত্র প্রধান পার্থক্য ' লুকান() ' এবং ' বিবর্ণ() 'পদ্ধতি হল:
- বিরতি : দ্য ' লুকান() ” পদ্ধতি ডিফল্টভাবে কোনো সময়ের ব্যবধান না নিয়েই উপাদানটির অস্বচ্ছতা 100 থেকে 0 এ পরিবর্তন করে লুকিয়ে রাখে, যেখানে “ বিবর্ণ() ' পদ্ধতি বিবর্ণ হয়ে যায় অর্থাৎ উপাদানটিকে ধীরে ধীরে '400ms' এ লুকান যা এটির ডিফল্ট মান।
আসুন বর্ণিত পার্থক্যের ব্যবহারিক বাস্তবায়ন দেখি।
প্রথমে নিম্নলিখিত HTML কোডটি দেখুন:
< কেন্দ্র >< h2 আইডি = 'H2' > Linuxhint-এ স্বাগতম ! h2 >
< বোতাম > উপাদান লুকান বোতাম >
কেন্দ্র >
উপরের কোড লাইনে:
- দ্য ' <কেন্দ্র> ” ট্যাগ ওয়েব পৃষ্ঠার কেন্দ্রে প্রদত্ত উপাদানগুলির প্রান্তিককরণ সামঞ্জস্য করে।
- দ্য ' ' ট্যাগ একটি আইডি 'H2' সহ একটি স্তর 2 উপশিরোনাম তৈরি করে৷
- দ্য ' <বোতাম> ” ট্যাগ একটি নতুন বোতাম সন্নিবেশ করায়।
বিঃদ্রঃ: উপরের HTML কোড এই নির্দেশিকা জুড়ে অনুসরণ করা হয়.
উদাহরণ: 'ডিফল্ট' মান সহ jQuery 'hide()' পদ্ধতি প্রয়োগ করা
এই উদাহরণটি একটি উপাদান লুকানোর জন্য ডিফল্ট মান সহ 'hide()' প্রয়োগ করে:
< লিপি >$ ( নথি ) . প্রস্তুত ( ফাংশন ( ) {
$ ( 'বোতাম' ) . ক্লিক ( ফাংশন ( ) {
$ ( '#H2' ) . লুকান ( ) ;
} ) ;
} ) ;
লিপি >
উপরের কোড লাইনে:
- প্রথমত, ' প্রস্তুত() বর্তমান এইচটিএমএল ডকুমেন্ট লোড হলে নির্দিষ্ট ফাংশন চালানোর জন্য ” পদ্ধতি প্রয়োগ করা হয়।
- পরবর্তী, ' ক্লিক() ' পদ্ধতিটি বোতামে ক্লিক করার পরে লিঙ্কযুক্ত ফাংশনটি বহন করার জন্য দায়ী।
- এর পরে, ' লুকান() ' পদ্ধতিটি অবিলম্বে অ্যাক্সেস করা শিরোনাম উপাদানটিকে লুকিয়ে রাখে যার আইডি 'H2'।
আউটপুট
এটি দেখা যায় যে শিরোনাম উপাদানটি বোতাম ক্লিক করার সাথে সাথে লুকিয়ে যায়।
উদাহরণ: 'ডিফল্ট' মান সহ jQuery 'fadeOut()' পদ্ধতি প্রয়োগ করা
এই উদাহরণটি '400ms' এ প্রদত্ত উপাদানটিকে ধীরে ধীরে লুকানোর জন্য তার ডিফল্ট মান সহ 'fadeOut()' পদ্ধতি ব্যবহার করে।
এই পরিস্থিতিতে 'বোতাম' উপাদানের বিষয়বস্তু পরিবর্তন করা হয়েছে:
< বোতাম > বিবর্ণ ( লুকান উপাদান ) বোতাম >এখন এইভাবে 'fadeOut()' পদ্ধতি প্রয়োগ করুন:
< লিপি >$ ( নথি ) . প্রস্তুত ( ফাংশন ( ) {
$ ( 'বোতাম' ) . ক্লিক ( ফাংশন ( ) {
$ ( '#H2' ) . বিবর্ণ ( ) ;
} ) ;
} ) ;
লিপি >
এই সময়ে, ' বিবর্ণ() ” পদ্ধতিটি 400ms অর্থাৎ ডিফল্ট মান সহ অ্যাক্সেস করা শিরোনাম উপাদানটিকে বিবর্ণ করতে প্রয়োগ করা হয়।
আউটপুট
আউটপুট স্পষ্টভাবে দেখায় যে প্রদত্ত বোতাম ক্লিকটি শিরোনাম উপাদানটিকে ধীরে ধীরে ডিফল্ট সময়ের ব্যবধানে লুকিয়ে রাখে যেমন “400ms”।
jQuery এ show() এবং fadeIn() এর মধ্যে পার্থক্য করুন
'লুকান()' এবং 'fadeOut()' পদ্ধতির অনুরূপ, একই পার্থক্য 'শো()' এবং 'fadeIn()' পদ্ধতির মধ্যে:
- বিরতি : দ্য ' দেখান() ' পদ্ধতিটি ডিফল্টভাবে লুকানো উপাদানটি 0 থেকে 100 থেকে অবিলম্বে তার অস্বচ্ছতা পরিবর্তন করে প্রদর্শন করে, যেখানে ' বিবর্ণ() ' পদ্ধতিটি লুকানো উপাদানটিকে ধীরে ধীরে '400ms' এ দেখায় যা এটির ডিফল্ট মান।
উদাহরণ: 'ডিফল্ট' মান সহ jQuery 'শো()' পদ্ধতি প্রয়োগ করা
এই উদাহরণটি লুকানো উপাদান প্রদর্শন করতে ডিফল্ট মান সহ 'শো()' প্রয়োগ করে।
প্রথমে প্রদত্ত HTML কোড ব্লকটি দেখুন:
< কেন্দ্র >< বোতাম > এলিমেন্ট দেখান বোতাম >
< h2 আইডি = 'H2' শৈলী = 'প্রদর্শন: কিছুই নয়' > Linuxhint-এ স্বাগতম ! h2 >
কেন্দ্র >
এই দৃশ্যকল্প অনুসারে, প্রদত্ত শিরোনাম উপাদানটি 'এর সাহায্যে লুকানো হয় প্রদর্শন: কোনোটিই নয় 'সম্পত্তি।
এখন, 'শো()' পদ্ধতির ব্যবহারিক বাস্তবায়ন বুঝতে প্রদত্ত কোড ব্লকটি অনুসরণ করুন:
< লিপি >$ ( নথি ) . প্রস্তুত ( ফাংশন ( ) {
$ ( 'বোতাম' ) . ক্লিক ( ফাংশন ( ) {
$ ( '#H2' ) . প্রদর্শন ( ) ;
} ) ;
} ) ;
লিপি >
উপরের কোড ব্লক ব্যবহার করে ' দেখান() যোগ করা লুকানো উপাদান অবিলম্বে প্রদর্শন করার পদ্ধতি।
আউটপুট
এটি দেখা যায় যে বোতাম ক্লিকটি অবিলম্বে লুকানো শিরোনাম উপাদানটি দেখায়।
উদাহরণ: 'ডিফল্ট' মান সহ jQuery 'fadeIn()' পদ্ধতি প্রয়োগ করা
এই উদাহরণটি ডিফল্ট মান সহ 'fadeIn()' পদ্ধতি ব্যবহার করে লুকানো উপাদান দেখায় ' 400ms ”:
বাটন উপাদানের পাঠ্য প্রদত্ত দৃশ্য অনুযায়ী পরিবর্তিত হয়:
< বোতাম > বিবর্ণ ( দেখান উপাদান ) বোতাম >এখন, প্রয়োগ করুন ' বিবর্ণ() নিম্নলিখিত কোড ব্লক ব্যবহার করে পদ্ধতি:
< লিপি >$ ( নথি ) . প্রস্তুত ( ফাংশন ( ) {
$ ( 'বোতাম' ) . ক্লিক ( ফাংশন ( ) {
$ ( '#H2' ) . বিবর্ণ ( ) ;
} ) ;
} ) ;
লিপি >
এই কোড ব্লকে, ' বিবর্ণ() ” পদ্ধতিটি 400ms অর্থাৎ ডিফল্ট মান আইডি “H2” এর সাথে মিলে যাওয়া লুকানো উপাদান দেখানোর জন্য ব্যবহার করা হয়।
আউটপুট
এটি লক্ষ্য করা যায় যে প্রদত্ত বোতাম ক্লিকটি লুকানো উপাদানটিকে ধীরে ধীরে ডিফল্ট সময়ের ব্যবধানে দেখায় যেমন “400ms”।
উপসংহার
jQuery এ, এর মধ্যে একমাত্র মূল পার্থক্য লুকান() এবং বিবর্ণ() , দেখান() , এবং বিবর্ণ() পদ্ধতি হল ' বিরতি ” 'শো()' এবং 'লুকান()' পদ্ধতি ডিফল্টরূপে তাদের কার্যকারিতাগুলি অবিলম্বে সম্পাদন করে, যেখানে 'fadeIn()', এবং 'fadeOut()' পদ্ধতি ডিফল্ট সময়ের ব্যবধানে যেমন '400ms' তাদের কার্য সম্পাদন করে। এই পোস্টটি কার্যত jQuery-এ hide() এবং fadeOut(), show(), এবং fadeIn() এর মধ্যে মূল পার্থক্য ব্যাখ্যা করেছে।