یہ پوسٹ jQuery میں hide() اور fadeOut()، show()، اور fadeIn() کے درمیان اہم فرق کو نمایاں کرتی ہے۔
jQuery میں hide() اور fadeOut()، show() اور fadeIn() کے درمیان فرق پر جانے سے پہلے، پہلے درج ذیل گائیڈز کو پڑھ کر ان طریقوں کی بنیادی باتیں دیکھیں:
- jQuery کا fadeIn() طریقہ
- jQuery کا fadeOut() طریقہ
- JavaScript JQuery Hide() طریقہ | سمجھایا
- JQuery شو () طریقہ | سمجھایا
پہلے jQuery میں hide() اور fadeOut() طریقوں کے درمیان فرق دیکھیں۔
jQuery میں hide() اور fadeOut() کے درمیان فرق کریں۔
کے درمیان ایک اور واحد بنیادی فرق ' چھپائیں() 'اور' دھندلا ہو جانا() طریقہ یہ ہے:
- وقت وقفہ : ' چھپائیں() 'میتھڈ بذریعہ ڈیفالٹ عنصر کو بغیر کسی وقفے کے فوری طور پر 100 سے 0 میں تبدیل کر کے چھپا دیتا ہے، جبکہ ' دھندلا ہو جانا() 'طریقہ ختم ہو جاتا ہے یعنی عنصر کو آہستہ آہستہ '400ms' میں چھپائیں جو اس کی ڈیفالٹ ویلیو ہے۔
آئیے بیان کردہ فرق کے عملی نفاذ کو دیکھتے ہیں۔
پہلے درج ذیل HTML کوڈ کو دیکھیں:
< مرکز >< h2 آئی ڈی = 'H2' > Linuxhint میں خوش آمدید ! h2 >
< بٹن > عنصر کو چھپائیں۔ بٹن >
مرکز >
مندرجہ بالا کوڈ لائنوں میں:
- ' <مرکز> ” ٹیگ ویب صفحہ کے بیچ میں دیئے گئے عناصر کی سیدھ کو ایڈجسٹ کرتا ہے۔
- ' ' ٹیگ ایک id 'H2' کے ساتھ ایک لیول 2 ذیلی سرخی بناتا ہے۔
- ' <بٹن> ” ٹیگ ایک نیا بٹن داخل کرتا ہے۔
نوٹ: اس گائیڈ میں مندرجہ بالا HTML کوڈ کی پیروی کی جاتی ہے۔
مثال: 'ڈیفالٹ' قدر کے ساتھ jQuery 'hide()' طریقہ کا اطلاق کرنا
یہ مثال کسی عنصر کو چھپانے کے لیے 'hide()' کو اس کی ڈیفالٹ اقدار کے ساتھ لاگو کرتی ہے:
< سکرپٹ >$ ( دستاویز ) . تیار ( فنکشن ( ) {
$ ( 'بٹن' ) . کلک کریں ( فنکشن ( ) {
$ ( '#H2' ) . چھپائیں ( ) ;
} ) ;
} ) ;
سکرپٹ >
مندرجہ بالا کوڈ لائنوں میں:
- سب سے پہلے، ' تیار() جب موجودہ ایچ ٹی ایم ایل دستاویز کو لوڈ کیا جاتا ہے تو مخصوص فنکشنز کو انجام دینے کے لیے طریقہ استعمال کیا جاتا ہے۔
- اگلا، ' کلک کریں() بٹن پر کلک کرنے پر لنک شدہ فنکشن کو انجام دینے کا طریقہ ذمہ دار ہے۔
- اس کے بعد، ' چھپائیں() ' طریقہ رسائی شدہ سرخی کے عنصر کو فوری طور پر چھپا دیتا ہے جس کی id 'H2' ہے۔
آؤٹ پٹ
یہ دیکھا جا سکتا ہے کہ بٹن پر کلک کرنے پر سرخی کا عنصر فوراً چھپ جاتا ہے۔
مثال: 'ڈیفالٹ' قدر کے ساتھ jQuery 'fadeOut()' طریقہ کا اطلاق کرنا
یہ مثال '400ms' میں دیے گئے عنصر کو آہستہ آہستہ چھپانے کے لیے اپنی ڈیفالٹ اقدار کے ساتھ 'fadeOut()' طریقہ استعمال کرتی ہے۔
اس منظر نامے میں 'بٹن' عنصر کا مواد تبدیل ہو گیا ہے:
< بٹن > دھندلا ہو جانا ( چھپائیں عنصر ) بٹن >اب 'fadeOut()' طریقہ کو اس طرح نافذ کریں:
< سکرپٹ >$ ( دستاویز ) . تیار ( فنکشن ( ) {
$ ( 'بٹن' ) . کلک کریں ( فنکشن ( ) {
$ ( '#H2' ) . دھندلا ہو جانا ( ) ;
} ) ;
} ) ;
سکرپٹ >
اس وقت، ' دھندلا ہو جانا() 400ms یعنی ڈیفالٹ ویلیو کے ساتھ رسائی شدہ سرخی کے عنصر کو ختم کرنے کے لیے طریقہ استعمال کیا جاتا ہے۔
آؤٹ پٹ
آؤٹ پٹ واضح طور پر ظاہر کرتا ہے کہ دیا گیا بٹن کلک ہیڈنگ عنصر کو بتدریج ڈیفالٹ ٹائم وقفہ یعنی '400ms' میں چھپاتا ہے۔
jQuery میں show() اور fadeIn() کے درمیان فرق کریں۔
'Hide()' اور 'fadeOut()' طریقوں کی طرح، وہی فرق 'show()' اور 'fadeIn()' طریقہ کے درمیان ہے:
- وقت وقفہ : ' دکھائیں() 'میتھڈ بذریعہ ڈیفالٹ چھپے ہوئے عنصر کو فوری طور پر 0 سے 100 تک تبدیل کرکے دکھاتا ہے، جبکہ ' fadeIn() ' طریقہ پوشیدہ عنصر کو آہستہ آہستہ '400ms' میں دکھاتا ہے جو اس کی ڈیفالٹ ویلیو ہے۔
مثال: 'ڈیفالٹ' قدر کے ساتھ jQuery 'شو()' طریقہ کا اطلاق کرنا
یہ مثال پوشیدہ عنصر کو ظاہر کرنے کے لیے 'شو()' کو اس کی ڈیفالٹ اقدار کے ساتھ لاگو کرتی ہے۔
پہلے فراہم کردہ HTML کوڈ بلاک کو دیکھیں:
< مرکز >< بٹن > عنصر دکھائیں۔ بٹن >
< h2 آئی ڈی = 'H2' انداز = 'ڈسپلے: کوئی نہیں' > Linuxhint میں خوش آمدید ! h2 >
مرکز >
اس منظر نامے کے مطابق، دی گئی سرخی کا عنصر 'کی مدد سے چھپا ہوا ہے۔ ڈسپلے: کوئی نہیں۔ ' جائیداد.
اب، 'شو()' طریقہ کار کے عملی نفاذ کو سمجھنے کے لیے دیے گئے کوڈ بلاک کی پیروی کریں:
< سکرپٹ >$ ( دستاویز ) . تیار ( فنکشن ( ) {
$ ( 'بٹن' ) . کلک کریں ( فنکشن ( ) {
$ ( '#H2' ) . دکھائیں ( ) ;
} ) ;
} ) ;
سکرپٹ >
مندرجہ بالا کوڈ بلاک استعمال کرتا ہے ' دکھائیں() شامل پوشیدہ عنصر کو فوری طور پر ظاہر کرنے کا طریقہ۔
آؤٹ پٹ
یہ دیکھا جا سکتا ہے کہ بٹن پر کلک کرنے سے پوشیدہ ہیڈنگ عنصر فوراً ظاہر ہو جاتا ہے۔
مثال: 'ڈیفالٹ' ویلیو کے ساتھ jQuery 'fadeIn()' طریقہ کا اطلاق کرنا
یہ مثال پہلے سے طے شدہ قدر کے ساتھ 'fadeIn()' طریقہ کا استعمال کرتے ہوئے پوشیدہ عنصر کو دکھاتی ہے۔ 400ms ”:
بٹن عنصر کا متن دیئے گئے منظر نامے کے مطابق تبدیل کیا جاتا ہے:
< بٹن > fadeIn ( دکھائیں۔ عنصر ) بٹن >اب، لاگو کریں ' fadeIn() مندرجہ ذیل کوڈ بلاک کا استعمال کرتے ہوئے طریقہ:
< سکرپٹ >$ ( دستاویز ) . تیار ( فنکشن ( ) {
$ ( 'بٹن' ) . کلک کریں ( فنکشن ( ) {
$ ( '#H2' ) . fadeIn ( ) ;
} ) ;
} ) ;
سکرپٹ >
اس کوڈ بلاک میں، ' fadeIn() 'طریقہ کو چھپے ہوئے عنصر کو دکھانے کے لیے استعمال کیا جاتا ہے جو 400ms میں id 'H2' کے ساتھ مماثل ہے یعنی ڈیفالٹ ویلیو۔
آؤٹ پٹ
یہ دیکھا جا سکتا ہے کہ دیا گیا بٹن کلک پہلے سے طے شدہ وقت کے وقفے یعنی '400ms' میں پوشیدہ عنصر کو آہستہ آہستہ دکھاتا ہے۔
نتیجہ
jQuery میں، کے درمیان واحد کلیدی فرق چھپائیں() اور دھندلا ہو جانا() ، دکھائیں() ، اور fadeIn() طریقہ ہے ' وقت وقفہ ' 'شو()' اور 'ہائیڈ()' طریقہ ڈیفالٹ کے طور پر فوری طور پر اپنے افعال انجام دیتا ہے، جب کہ 'fadeIn()'، اور 'fadeOut()' طریقہ ڈیفالٹ ٹائم وقفہ یعنی '400ms' میں اپنے کام انجام دیتا ہے۔ اس پوسٹ نے jQuery میں hide() اور fadeOut()، show()، اور fadeIn() کے درمیان کلیدی فرقوں کی عملی طور پر وضاحت کی ہے۔