یہ پوسٹ jQuery کے fadeOut() طریقہ کے عملی نفاذ کی وضاحت کرے گی تاکہ ہموار فیڈ آؤٹ اثر پیدا کیا جا سکے۔
jQuery کے fadeOut() طریقہ کا استعمال کرتے ہوئے ہموار فیڈ آؤٹ اثرات کیسے بنائیں؟
jQuery کی ' دھندلا ہو جانا() ' طریقہ منتخب عنصر کو آہستہ آہستہ اس کی دھندلاپن کو کم کرکے چھپاتا ہے۔ یہ طریقہ منتخب عنصر کی حالت کو مرئی سے پوشیدہ میں تبدیل کرتا ہے۔ پوشیدہ عنصر ویب صفحہ پر اس وقت تک ظاہر نہیں ہوتا جب تک کہ صارف اسے استعمال کرکے دوبارہ ظاہر نہ کرے۔ fadeIn() 'طریقہ.
نحو
$ ( سلیکٹر ) . دھندلا ہو جانا ( رفتار، نرمی، کال بیک ) ;
مندرجہ بالا نحو فیڈ آؤٹ اثر کو حسب ضرورت بنانے کے لیے درج ذیل اختیاری پیرامیٹرز کی حمایت کرتا ہے:
- رفتار: یہ ملی سیکنڈ میں دھندلاہٹ اثر کی رفتار بتاتا ہے۔ پہلے سے طے شدہ طور پر اس کی قیمت '400ms' ہے۔ مزید یہ کہ یہ دو بلٹ ان اقدار 'سست' اور 'تیز' کو بھی سپورٹ کرتا ہے۔
- نرمی یہ مختلف مقامات پر دھندلاہٹ حرکت پذیری کی رفتار کو ظاہر کرتا ہے۔ پہلے سے طے شدہ طور پر اس کی قدر 'سوئنگ (شروع/آخر میں آہستہ، اور درمیان میں سست)' ہے۔ اس کے علاوہ، یہ 'لکیری (مستقل حرکت پذیری میں مستقل رفتار)' پر بھی کام کرتا ہے۔
- کال بیک: یہ صارف کی طرف سے طے شدہ فنکشن کی وضاحت کرتا ہے جو متعین کام کو انجام دینے کے لیے دھندلاہٹ حرکت پذیری کو مکمل کرنے کے بعد انجام دیتا ہے۔
آئیے اوپر بیان کردہ طریقہ کو عملی طور پر استعمال کریں۔
HTML کوڈ
'fadeOut()' طریقہ پر جانے سے پہلے، مندرجہ ذیل HTML کوڈ کو دیکھیں جو ایک نمونہ 'div' عنصر بناتا ہے جس پر دھندلا آؤٹ اثر کیا جائے گا:
< بٹن > دھندلا ہو جانا ( چھپائیں عنصر ) بٹن >< بی آر >< بی آر >< div id = 'myDiv' انداز = 'اونچائی: 80px؛ چوڑائی: 300px؛ بارڈر: 2px ٹھوس سیاہ؛ مارجن: آٹو؛ متن کی سیدھ: مرکز' >
< h2 > Linuxhint میں خوش آمدید h2 >
div >
کوڈ کی اوپر کی لائنوں میں:
- ' <بٹن> ” ٹیگ بٹن کا عنصر شامل کرتا ہے۔
- ' ٹیگ ایک div عنصر بناتا ہے جس کی ایک id 'myDiv' ہوتی ہے، اور اسے درج ذیل اسٹائلنگ خصوصیات (اونچائی، چوڑائی، بارڈر، مارجن، ٹیکسٹ الائن) کی مدد سے اسٹائل کیا جاتا ہے۔
- div کے اندر، ' ” ٹیگ سطح 2 کے پہلے ذیلی عنوان کے عنصر کی وضاحت کرتا ہے۔
اب، پہلی مثال کے ساتھ شروع کریں.
مثال 1: fadeOut() ڈیفالٹ ویلیو کے ساتھ ہموار فیڈ آؤٹ ایفیکٹس بنائیں
پہلی مثال اس کی ڈیفالٹ قدر '400ms' کے ساتھ 'fadeOut()' طریقہ استعمال کرکے مماثل div عنصر کو چھپاتی ہے:
< سکرپٹ >
$ ( دستاویز ) . تیار ( فنکشن ( ) {
$ ( 'بٹن' ) . کلک کریں ( فنکشن ( ) {
$ ( '#myDiv' ) . دھندلا ہو جانا ( ) ;
} ) ;
} ) ;
سکرپٹ >مندرجہ بالا کوڈ لائنوں میں:
- سب سے پہلے، ' تیار() جب موجودہ HTML دستاویز/DOM لوڈ کیا جاتا ہے تو طریقہ دیئے گئے فنکشنز کو انجام دیتا ہے۔
- اگلا، ' کلک کریں() جب اس سے منسلک 'بٹن' سلیکٹر پر کلک کیا جاتا ہے تو ' طریقہ بٹن پر کلک کرنے پر لنک شدہ فنکشن کو انجام دیتا ہے۔
- اس کے بعد، ' دھندلا ہو جانا() ' طریقہ رسائی شدہ div عنصر کو چھپاتا ہے جس کی id 400ms میں 'myDiv' ہے یعنی ڈیفالٹ ویلیو۔
آؤٹ پٹ
یہ مشاہدہ کیا گیا ہے کہ دیئے گئے بٹن پر کلک کرنے سے div عنصر آہستہ آہستہ '400ms' میں ختم ہو جاتا ہے۔
مثال 2: fadeOut() 'اسپیڈ' پیرامیٹر کے ساتھ ہموار فیڈ آؤٹ ایفیکٹس بنائیں
یہ مثال 'رفتار' پیرامیٹر کی بلٹ ان ویلیوز (سست/تیز) کے ساتھ 'fadeOut()' طریقہ استعمال کرتی ہے:
< سکرپٹ >
$ ( دستاویز ) . تیار ( فنکشن ( ) {
$ ( 'بٹن' ) . کلک کریں ( فنکشن ( ) {
$ ( '#myDiv' ) . دھندلا ہو جانا ( 'آہستہ' ) ;
} ) ;
} ) ;
سکرپٹ >اب، ' دھندلا ہو جانا() 'طریقہ گزرتا ہے' سست ” قدر کو اس کے پیرامیٹر کے طور پر آسانی سے دھندلاہٹ اثر پیدا کرنے کے لیے یعنی منتخب div عنصر کی حالت کو مرئی سے پوشیدہ میں تبدیل کرتا ہے۔
آؤٹ پٹ
یہ دیکھا جا سکتا ہے کہ بٹن کے کلک پر منتخب div عنصر آہستہ آہستہ چھپ جاتا ہے۔
مثال 3: fadeOut() 'مدت' پیرامیٹر کے ساتھ ہموار فیڈ آؤٹ اثرات بنائیں
یہ مثال 'fadeOut()' طریقہ کو اس کے دورانیہ کے پیرامیٹر کے طور پر ملی سیکنڈ کے مخصوص نمبر کے ساتھ لاگو کرتی ہے:
< سکرپٹ >
$ ( دستاویز ) . تیار ( فنکشن ( ) {
$ ( 'بٹن' ) . کلک کریں ( فنکشن ( ) {
$ ( '#myDiv' ) . دھندلا ہو جانا ( 6000 ) ;
} ) ;
} ) ;
سکرپٹ >اب، 'fadeOut()' طریقہ دی گئی مدت میں مماثل عنصر کو چھپانے کے لیے ملی سیکنڈز کی مخصوص نمبر کا استعمال کرتا ہے۔
آؤٹ پٹ
مندرجہ بالا آؤٹ پٹ ایک مقررہ وقت کے وقفے میں بٹن پر کلک کرنے پر دی گئی div عنصر کی تبدیلیوں کو چھپاتا ہے۔
مثال 4: fadeOut() 'کال بیک' فنکشن کے ساتھ ہموار فیڈ آؤٹ ایفیکٹس بنائیں
یہ مثال 'fadeOut()' طریقہ کے ذریعے فیڈ آؤٹ اثر کی تکمیل پر کال بیک فنکشن کو انجام دیتی ہے:
< سکرپٹ >
$ ( دستاویز ) . تیار ( فنکشن ( ) {
$ ( 'بٹن' ) . کلک کریں ( فنکشن ( ) {
$ ( '#myDiv' ) . دھندلا ہو جانا ( 4000 ، فنکشن ( ) {
تسلی. لاگ ( 'دیئے گئے div عنصر کو کامیابی سے چھپایا گیا!' )
} ) ;
} ) ;
} ) ;
سکرپٹ >بیان کردہ کوڈ بلاک میں:
- ' دھندلا ہو جانا() ' طریقہ مماثل div عنصر کو ملی سیکنڈ کے مخصوص نمبر میں ختم کرتا ہے اور پھر فراہم کردہ 'کال بیک' فنکشن کو انجام دیتا ہے۔
- کے اندر ' کال بیک 'فنکشن،' console.log() 'فیڈ آؤٹ' اثر کی تکمیل کے بعد مخصوص بیان کو ظاہر کرنے کے لیے طریقہ استعمال کیا جاتا ہے۔
آؤٹ پٹ
یہ دیکھا گیا ہے کہ 'کنسول' دیے گئے div عنصر کو چھپانے کے بعد کال بیک فنکشن میں بیان کردہ ایک بیان دکھاتا ہے۔
مثال 5: فیڈ آؤٹ () 'آسان' پیرامیٹر کے ساتھ ہموار فیڈ آؤٹ اثرات بنائیں
یہ مثال 'fadeOut()' طریقہ کو 'easing' پیرامیٹر کی ممکنہ اقدار کے ساتھ لاگو کرتی ہے:
< سکرپٹ >
$ ( دستاویز ) . تیار ( فنکشن ( ) {
$ ( 'بٹن' ) . کلک کریں ( فنکشن ( ) {
$ ( '#myDiv' ) . دھندلا ہو جانا ( 4000 , 'لکیری' ) ;
} ) ;
} ) ;
سکرپٹ >اب، ' دھندلا ہو جانا() ' طریقہ کار کی وجہ سے ایک مستقل رفتار سے ملی سیکنڈ کے مخصوص نمبر میں فیڈ آؤٹ اثر کو انجام دیتا ہے۔ لکیری ' قدر.
آؤٹ پٹ
آؤٹ پٹ ایک مستقل رفتار سے دیے گئے عنصر کی حالت کو مرئی سے پوشیدہ میں تبدیل کرتا ہے۔ یہ عنصر پر 'فیڈ آؤٹ' اثر کو نافذ کرنے کے لئے ہے۔
نتیجہ
jQuery کا استعمال کرتے ہوئے ایک ہموار دھندلا اثر پیدا کرنے کے لیے ' دھندلا ہو جانا() ” طریقہ، صارف کو کسی اضافی پیرامیٹر کی ضرورت نہیں ہے۔ یہ طریقہ ختم ہوجاتا ہے یعنی عنصر کو آہستہ آہستہ اس کی دھندلاپن کو تبدیل کرکے چھپاتا ہے۔ اگر صارف کو ملی سیکنڈ کے مخصوص نمبر میں فیڈنگ آؤٹ اثر انجام دینے کی ضرورت ہے، تو کال بیک فنکشن کو انجام دیں پھر 'فیڈ آؤٹ()' طریقہ کے ساتھ 'رفتار'، 'آسان'، اور 'کال بیک' پیرامیٹرز استعمال کریں۔ اس پوسٹ نے عملی طور پر jQuery کے fadeOut() طریقہ کی وضاحت کی ہے تاکہ ہموار دھندلا اثر پیدا ہو۔