మృదువైన ఫేడ్-అవుట్ ప్రభావాన్ని సృష్టించడం కోసం j క్వెరీ యొక్క ఫేడ్అవుట్() పద్ధతి యొక్క ఆచరణాత్మక అమలును ఈ పోస్ట్ వివరిస్తుంది.
j క్వెరీ ఫేడ్అవుట్ () పద్ధతిని ఉపయోగించి స్మూత్ ఫేడ్-అవుట్ ఎఫెక్ట్‌లను ఎలా సృష్టించాలి?
j క్వెరీ ' వెళ్లి పోవడం() ” పద్ధతి ఎంచుకున్న మూలకాన్ని దాని అస్పష్టతను తగ్గించడం ద్వారా క్రమంగా దాచిపెడుతుంది. ఈ పద్ధతి ఎంచుకున్న మూలకం యొక్క స్థితిని కనిపించే నుండి దాచబడిన స్థితికి మారుస్తుంది. దాచిన మూలకం ' fadeIn() ” పద్ధతి.
వాక్యనిర్మాణం
$ ( సెలెక్టర్ ) . వెళ్లి పోవడం ( వేగం, సడలింపు, కాల్ బ్యాక్ ) ;
ఫేడ్-అవుట్ ప్రభావాన్ని అనుకూలీకరించడానికి పై వాక్యనిర్మాణం కింది ఐచ్ఛిక పారామితులకు మద్దతు ఇస్తుంది:
- వేగం: ఇది మిల్లీసెకన్లలో ఫేడింగ్ ఎఫెక్ట్ వేగాన్ని నిర్దేశిస్తుంది. డిఫాల్ట్‌గా దాని విలువ '400ms'. అంతేకాకుండా, ఇది 'నెమ్మదిగా' మరియు 'వేగంగా' అనే రెండు అంతర్నిర్మిత విలువలకు కూడా మద్దతు ఇస్తుంది.
- సడలించడం: ఇది వివిధ పాయింట్ల వద్ద క్షీణిస్తున్న యానిమేషన్ వేగాన్ని చూపుతుంది. డిఫాల్ట్‌గా దాని విలువ 'స్వింగ్ (ప్రారంభం/ముగింపులో నెమ్మదిగా మరియు మధ్యలో నెమ్మదిగా ఉంటుంది)'. అదనంగా, ఇది 'లీనియర్ (క్షీణిస్తున్న యానిమేషన్‌లో స్థిరమైన వేగం)'పై కూడా పనిచేస్తుంది.
- తిరిగి కాల్ చేయండి: ఇది నిర్వచించిన విధిని నిర్వహించడానికి ఫేడింగ్ యానిమేషన్‌ను పూర్తి చేసిన తర్వాత అమలు చేసే వినియోగదారు నిర్వచించిన ఫంక్షన్‌ను నిర్వచిస్తుంది.
పైన వివరించిన పద్ధతిని ఆచరణాత్మకంగా ఉపయోగిస్తాము.
HTML కోడ్
“FadeOut()” పద్ధతికి వెళ్లే ముందు, ఫేడ్-అవుట్ ప్రభావం ప్రదర్శించబడే నమూనా “div” మూలకాన్ని సృష్టించే క్రింది HTML కోడ్‌ని చూడండి:
< బటన్ > వెళ్లి పోవడం ( దాచు మూలకం ) బటన్ >< br >< br >< div id = 'myDiv' శైలి = 'ఎత్తు: 80px; వెడల్పు: 300px; అంచు: 2px ఘన నలుపు; మార్జిన్: ఆటో; టెక్స్ట్-అలైన్: సెంటర్' >
< h2 > Linuxhintకి స్వాగతం h2 >
div >
పై కోడ్ లైన్లలో:
- ది ' <బటన్> ” ట్యాగ్ బటన్ మూలకాన్ని జోడిస్తుంది.
- ది ' ”ట్యాగ్ ఒక id “myDiv”ని కలిగి ఉన్న ఒక div మూలకాన్ని సృష్టిస్తుంది మరియు క్రింది స్టైలింగ్ లక్షణాల (ఎత్తు, వెడల్పు, సరిహద్దు, మార్జిన్, టెక్స్ట్-అలైన్) సహాయంతో స్టైల్ చేయబడింది.
- div లోపల, ' ” ట్యాగ్ స్థాయి 2 యొక్క మొదటి ఉపశీర్షిక మూలకాన్ని నిర్దేశిస్తుంది.
ఇప్పుడు, మొదటి ఉదాహరణతో ప్రారంభించండి.
ఉదాహరణ 1: ఫేడ్అవుట్() డిఫాల్ట్ విలువతో స్మూత్ ఫేడ్-అవుట్ ఎఫెక్ట్‌లను సృష్టించండి
మొదటి ఉదాహరణ దాని డిఫాల్ట్ విలువ “400ms”తో “fadeOut()” పద్ధతిని ఉపయోగించడం ద్వారా సరిపోలిన div మూలకాన్ని దాచిపెడుతుంది:
< స్క్రిప్ట్ >
$ ( పత్రం ) . సిద్ధంగా ( ఫంక్షన్ ( ) {
$ ( 'బటన్' ) . క్లిక్ చేయండి ( ఫంక్షన్ ( ) {
$ ( '#myDiv' ) . వెళ్లి పోవడం ( ) ;
} ) ;
} ) ;
స్క్రిప్ట్ >పై కోడ్ లైన్లలో:
- ముందుగా, ' సిద్ధంగా () ” పద్ధతి ప్రస్తుత HTML పత్రం/DOM లోడ్ అయినప్పుడు ఇచ్చిన ఫంక్షన్‌లను అమలు చేస్తుంది.
- తరువాత, ' క్లిక్() ” పద్ధతి దాని అనుబంధిత “బటన్” సెలెక్టర్‌ని క్లిక్ చేసినప్పుడు బటన్ క్లిక్‌పై లింక్ చేసిన ఫంక్షన్‌ను అమలు చేస్తుంది.
- ఆ తరువాత, ' వెళ్లి పోవడం() ”మెథడ్ యాక్సెస్ చేయబడిన div ఎలిమెంట్‌ను దాచిపెడుతుంది, దీని id “myDiv” 400msలో అంటే డిఫాల్ట్ విలువ.
అవుట్‌పుట్
ఇవ్వబడిన బటన్ క్లిక్ '400ms'లో క్రమక్రమంగా div మూలకం మసకబారుతుందని గమనించవచ్చు.
ఉదాహరణ 2: ఫేడ్అవుట్() “స్పీడ్” పరామితితో స్మూత్ ఫేడ్-అవుట్ ఎఫెక్ట్‌లను సృష్టించండి
ఈ ఉదాహరణ 'స్పీడ్' పరామితి యొక్క అంతర్నిర్మిత విలువలతో (స్లో/ఫాస్ట్) 'ఫేడ్అవుట్()' పద్ధతిని ఉపయోగిస్తుంది:
< స్క్రిప్ట్ >
$ ( పత్రం ) . సిద్ధంగా ( ఫంక్షన్ ( ) {
$ ( 'బటన్' ) . క్లిక్ చేయండి ( ఫంక్షన్ ( ) {
$ ( '#myDiv' ) . వెళ్లి పోవడం ( 'నెమ్మదిగా' ) ;
} ) ;
} ) ;
స్క్రిప్ట్ >ఇప్పుడు, ' వెళ్లి పోవడం() 'పద్ధతి దాటిపోతుంది' నెమ్మదిగా ఫేడింగ్ అవుట్ ఎఫెక్ట్‌ను సజావుగా సృష్టించడానికి 'విలువ దాని పరామితిగా ఉంటుంది, అంటే ఎంచుకున్న div ఎలిమెంట్ స్థితిని కనిపించే నుండి దాచిన స్థితికి మారుస్తుంది.
అవుట్‌పుట్
బటన్ క్లిక్‌పై ఎంచుకున్న div మూలకం నెమ్మదిగా దాగి ఉన్నట్లు చూడవచ్చు.
ఉదాహరణ 3: ఫేడ్అవుట్() “వ్యవధి” పరామితితో స్మూత్ ఫేడ్-అవుట్ ఎఫెక్ట్‌లను సృష్టించండి
ఈ ఉదాహరణ దాని వ్యవధి పరామితిగా నిర్దిష్ట మిల్లీసెకన్ల సంఖ్యతో “ఫేడ్అవుట్()” పద్ధతిని వర్తిస్తుంది:
< స్క్రిప్ట్ >
$ ( పత్రం ) . సిద్ధంగా ( ఫంక్షన్ ( ) {
$ ( 'బటన్' ) . క్లిక్ చేయండి ( ఫంక్షన్ ( ) {
$ ( '#myDiv' ) . వెళ్లి పోవడం ( 6000 ) ;
} ) ;
} ) ;
స్క్రిప్ట్ >ఇప్పుడు, ఇచ్చిన సమయ వ్యవధిలో సరిపోలిన మూలకాన్ని దాచడానికి “fadeOut()” పద్ధతి పేర్కొన్న మిల్లీసెకన్ల సంఖ్యను ఉపయోగిస్తుంది.
అవుట్‌పుట్
పైన పేర్కొన్న అవుట్‌పుట్ ఇచ్చిన సమయ వ్యవధిలో బటన్ క్లిక్‌పై ఇచ్చిన div మూలకం మార్పులను దాచిపెడుతుంది.
ఉదాహరణ 4: ఫేడ్అవుట్() “కాల్‌బ్యాక్” ఫంక్షన్‌తో స్మూత్ ఫేడ్-అవుట్ ఎఫెక్ట్‌లను సృష్టించండి
'fadeOut()' పద్ధతి ద్వారా ఫేడ్-అవుట్ ప్రభావం పూర్తయిన తర్వాత ఈ ఉదాహరణ కాల్‌బ్యాక్ ఫంక్షన్‌ను అమలు చేస్తుంది:
< స్క్రిప్ట్ >
$ ( పత్రం ) . సిద్ధంగా ( ఫంక్షన్ ( ) {
$ ( 'బటన్' ) . క్లిక్ చేయండి ( ఫంక్షన్ ( ) {
$ ( '#myDiv' ) . వెళ్లి పోవడం ( 4000 , ఫంక్షన్ ( ) {
కన్సోల్. లాగ్ ( 'డివ్ మూలకం విజయవంతంగా దాచబడింది!' )
} ) ;
} ) ;
} ) ;
స్క్రిప్ట్ >పేర్కొన్న కోడ్ బ్లాక్‌లో:
- ది ' వెళ్లి పోవడం() ” పద్ధతి సరిపోలిన div మూలకాన్ని నిర్దిష్ట మిల్లీసెకన్లలో ఫేడ్ చేసి, అందించిన “కాల్‌బ్యాక్” ఫంక్షన్‌ని అమలు చేస్తుంది.
- లోపల ' తిరిగి కాల్ చేయండి 'ఫంక్షన్, ది' console.log() 'ఫేడ్-అవుట్' ప్రభావం పూర్తయిన తర్వాత పేర్కొన్న స్టేట్‌మెంట్‌ను ప్రదర్శించడానికి ” పద్ధతి వర్తించబడుతుంది.
అవుట్‌పుట్
ఇచ్చిన div ఎలిమెంట్‌ను దాచిన తర్వాత కాల్‌బ్యాక్ ఫంక్షన్‌లో నిర్వచించిన స్టేట్‌మెంట్‌ను “కన్సోల్” చూపిస్తుంది.
ఉదాహరణ 5: ఫేడ్అవుట్() “సడలింపు” పరామితితో స్మూత్ ఫేడ్-అవుట్ ఎఫెక్ట్‌లను సృష్టించండి
ఈ ఉదాహరణ 'సడలింపు' పరామితి యొక్క సాధ్యమైన విలువలతో 'fadeOut()' పద్ధతిని వర్తిస్తుంది:
< స్క్రిప్ట్ >
$ ( పత్రం ) . సిద్ధంగా ( ఫంక్షన్ ( ) {
$ ( 'బటన్' ) . క్లిక్ చేయండి ( ఫంక్షన్ ( ) {
$ ( '#myDiv' ) . వెళ్లి పోవడం ( 4000 , 'సరళ' ) ;
} ) ;
} ) ;
స్క్రిప్ట్ >ఇప్పుడు, ' వెళ్లి పోవడం() 'పద్ధతి ఫేడ్ అవుట్ ఎఫెక్ట్‌ను నిర్దిష్ట మిల్లీసెకన్లలో స్థిరమైన వేగంతో నిర్వహిస్తుంది ఎందుకంటే' సరళ ' విలువ.
అవుట్‌పుట్
అవుట్‌పుట్ ఇచ్చిన మూలకం స్థితిని స్థిరమైన వేగంతో కనిపించే నుండి దాచిన స్థితికి మారుస్తుంది. మూలకంపై 'ఫేడ్-అవుట్' ప్రభావాన్ని అమలు చేయడం కోసం అంతే.
ముగింపు
j క్వెరీని ఉపయోగించి మృదువైన ఫేడ్-అవుట్ ప్రభావాన్ని సృష్టించడానికి ' వెళ్లి పోవడం() ” పద్ధతి, వినియోగదారుకు అదనపు పరామితి అవసరం లేదు. ఈ పద్ధతి మసకబారుతుంది అంటే మూలకాన్ని దాని అస్పష్టతను మార్చడం ద్వారా క్రమంగా దాచిపెడుతుంది. వినియోగదారు నిర్దిష్ట సంఖ్యలో మిల్లీసెకన్లలో ఫేడింగ్-అవుట్ ప్రభావాన్ని ప్రదర్శించాల్సిన అవసరం ఉన్నట్లయితే, కాల్‌బ్యాక్ ఫంక్షన్‌ని అమలు చేయండి, ఆపై “ఫేడ్అవుట్()” పద్ధతితో “వేగం”, “సడలింపు” మరియు “కాల్‌బ్యాక్” పారామితులను ఉపయోగించండి. ఈ పోస్ట్ ఒక మృదువైన ఫేడ్-అవుట్ ప్రభావాన్ని సృష్టించడానికి j క్వెరీ యొక్క ఫేడ్అవుట్ () పద్ధతిని ఆచరణాత్మకంగా వివరించింది.