ఈ పోస్ట్ j క్వెరీలో hide() మరియు fadeOut(), show(), and fadeIn() మధ్య ఉన్న కీలక వ్యత్యాసాలను హైలైట్ చేస్తుంది.
j క్వెరీలో hide() మరియు fadeOut(), show() మరియు fadeIn() మధ్య వ్యత్యాసానికి వెళ్లే ముందు, ఈ క్రింది గైడ్‌లను చదవడం ద్వారా మొదట ఈ పద్ధతుల యొక్క ప్రాథమికాలను చూడండి:
- j క్వెరీ ఫేడ్ఇన్ () పద్ధతి
- j క్వెరీ యొక్క ఫేడ్అవుట్ () పద్ధతి
- జావాస్క్రిప్ట్ j క్వెరీ దాచు() పద్ధతి | వివరించారు
- J క్వెరీ షో() పద్ధతి | వివరించారు
ముందుగా, j క్వెరీలో hide() మరియు fadeOut() పద్ధతుల మధ్య వ్యత్యాసాన్ని చూడండి.
j క్వెరీలో దాచు() మరియు ఫేడ్అవుట్() మధ్య తేడాను గుర్తించండి
మధ్య ఒకే ఒక్క ప్రధాన వ్యత్యాసం ' దాచు() 'మరియు' వెళ్లి పోవడం() 'పద్ధతి:
- సమయ విరామం : ది ' దాచు() 'పద్ధతి డిఫాల్ట్‌గా ఎలిమెంట్‌ను దాని అస్పష్టతను 100 నుండి 0కి మార్చడం ద్వారా ఏ సమయ వ్యవధిని తీసుకోకుండా దాచిపెడుతుంది, అయితే ' వెళ్లి పోవడం() ”పద్ధతి మసకబారుతుంది అంటే మూలకాన్ని క్రమంగా “400ms”లో దాచండి, ఇది దాని డిఫాల్ట్ విలువ.
పేర్కొన్న వ్యత్యాసం యొక్క ఆచరణాత్మక అమలును చూద్దాం.
మొదట కింది HTML కోడ్‌ను చూడండి:
< కేంద్రం >< h2 id = 'H2' > Linuxhintకి స్వాగతం ! h2 >
< బటన్ > మూలకాన్ని దాచు బటన్ >
కేంద్రం >
పై కోడ్ లైన్లలో:
- ది ' <కేంద్రం> ” ట్యాగ్ వెబ్ పేజీ మధ్యలో ఇవ్వబడిన మూలకాల అమరికను సర్దుబాటు చేస్తుంది.
- ది ' ”ట్యాగ్ “H2” ఐడితో లెవల్ 2 ఉపశీర్షికను సృష్టిస్తుంది.
- ది ' <బటన్> ” ట్యాగ్ కొత్త బటన్‌ను ఇన్‌సర్ట్ చేస్తుంది.
గమనిక: పై HTML కోడ్ ఈ గైడ్ అంతటా అనుసరించబడుతుంది.
ఉదాహరణ: 'డిఫాల్ట్' విలువతో j క్వెరీ 'దాచు()' పద్ధతిని వర్తింపజేయడం
ఈ ఉదాహరణ మూలకాన్ని దాచడానికి దాని డిఫాల్ట్ విలువలతో “దాచు()”ని వర్తిస్తుంది:
< స్క్రిప్ట్ >$ ( పత్రం ) . సిద్ధంగా ( ఫంక్షన్ ( ) {
$ ( 'బటన్' ) . క్లిక్ చేయండి ( ఫంక్షన్ ( ) {
$ ( '#H2' ) . దాచు ( ) ;
} ) ;
} ) ;
స్క్రిప్ట్ >
పై కోడ్ లైన్లలో:
- ముందుగా, ' సిద్ధంగా () ప్రస్తుత HTML పత్రం లోడ్ అయినప్పుడు పేర్కొన్న ఫంక్షన్‌లను అమలు చేయడానికి ” పద్ధతి వర్తించబడుతుంది.
- తరువాత, ' క్లిక్() బటన్ క్లిక్‌పై లింక్ చేసిన ఫంక్షన్‌ని నిర్వహించడానికి పద్ధతి బాధ్యత వహిస్తుంది.
- ఆ తరువాత, ' దాచు() ”మెథడ్ యాక్సెస్ చేయబడిన హెడింగ్ ఎలిమెంట్‌ను వెంటనే దాచిపెడుతుంది, దీని ఐడి “H2”.
అవుట్‌పుట్
బటన్ క్లిక్ చేసిన వెంటనే హెడ్డింగ్ ఎలిమెంట్ దాచబడుతుందని చూడవచ్చు.
ఉదాహరణ: 'డిఫాల్ట్' విలువతో j క్వెరీ 'ఫేడ్అవుట్()' పద్ధతిని వర్తింపజేయడం
ఈ ఉదాహరణ “400ms”లో ఇచ్చిన మూలకాన్ని క్రమంగా దాచడానికి దాని డిఫాల్ట్ విలువలతో “fadeOut()” పద్ధతిని ఉపయోగిస్తుంది.
ఈ దృష్టాంతంలో 'బటన్' మూలకం యొక్క కంటెంట్ మార్చబడింది:
< బటన్ > వెళ్లి పోవడం ( దాచు మూలకం ) బటన్ >ఇప్పుడు “ఫేడ్అవుట్()” పద్ధతిని ఈ విధంగా అమలు చేయండి:
< స్క్రిప్ట్ >$ ( పత్రం ) . సిద్ధంగా ( ఫంక్షన్ ( ) {
$ ( 'బటన్' ) . క్లిక్ చేయండి ( ఫంక్షన్ ( ) {
$ ( '#H2' ) . వెళ్లి పోవడం ( ) ;
} ) ;
} ) ;
స్క్రిప్ట్ >
ఈ సమయంలో, ' వెళ్లి పోవడం() యాక్సెస్ చేయబడిన హెడింగ్ ఎలిమెంట్‌ను 400msతో అంటే డిఫాల్ట్ విలువతో ఫేడ్ అవుట్ చేయడానికి ” పద్ధతి వర్తించబడుతుంది.
అవుట్‌పుట్
ఇచ్చిన బటన్ క్లిక్ హెడింగ్ ఎలిమెంట్‌ను డిఫాల్ట్ సమయ వ్యవధిలో క్రమంగా దాచిపెడుతుందని అవుట్‌పుట్ స్పష్టంగా చూపిస్తుంది, అంటే “400ms”.
j క్వెరీలో షో() మరియు ఫేడ్ఇన్() మధ్య తేడాను గుర్తించండి
“దాచు()” మరియు “ఫేడ్అవుట్()” పద్ధతుల మాదిరిగానే, “షో()” మరియు “ఫేడ్ఇన్()” పద్ధతి మధ్య అదే వ్యత్యాసం ఉంటుంది:
- సమయ విరామం : ది ' షో() ” పద్ధతి డిఫాల్ట్‌గా దాచిన మూలకాన్ని దాని అస్పష్టతను వెంటనే 0 నుండి 100కి మార్చడం ద్వారా ప్రదర్శిస్తుంది, అయితే “ fadeIn() ” పద్ధతి దాని డిఫాల్ట్ విలువ అయిన “400ms”లో దాచిన మూలకాన్ని క్రమంగా చూపుతుంది.
ఉదాహరణ: 'డిఫాల్ట్' విలువతో j క్వెరీ 'షో()' పద్ధతిని వర్తింపజేయడం
ఈ ఉదాహరణ దాచిన మూలకాన్ని ప్రదర్శించడానికి దాని డిఫాల్ట్ విలువలతో “షో()”ని వర్తింపజేస్తుంది.
అందించిన HTML కోడ్ బ్లాక్‌ని మొదట చూడండి:
< కేంద్రం >< బటన్ > మూలకాన్ని చూపించు బటన్ >
< h2 id = 'H2' శైలి = 'ప్రదర్శన: ఏదీ లేదు' > Linuxhintకి స్వాగతం ! h2 >
కేంద్రం >
ఈ దృష్టాంతం ప్రకారం, ఇవ్వబడిన శీర్షిక మూలకం '' సహాయంతో దాచబడుతుంది. ప్రదర్శన: ఏదీ లేదు ”ఆస్తి.
ఇప్పుడు, “షో()” పద్ధతి యొక్క ఆచరణాత్మక అమలును అర్థం చేసుకోవడానికి ఇచ్చిన కోడ్ బ్లాక్‌ని అనుసరించండి:
< స్క్రిప్ట్ >$ ( పత్రం ) . సిద్ధంగా ( ఫంక్షన్ ( ) {
$ ( 'బటన్' ) . క్లిక్ చేయండి ( ఫంక్షన్ ( ) {
$ ( '#H2' ) . చూపించు ( ) ;
} ) ;
} ) ;
స్క్రిప్ట్ >
పై కోడ్ బ్లాక్ “ని ఉపయోగిస్తుంది షో() ” జోడించిన దాచిన మూలకాన్ని వెంటనే ప్రదర్శించడానికి పద్ధతి.
అవుట్‌పుట్
బటన్ క్లిక్ వెంటనే దాచిన హెడింగ్ ఎలిమెంట్‌ను చూపుతుందని చూడవచ్చు.
ఉదాహరణ: 'డిఫాల్ట్' విలువతో j క్వెరీ 'ఫేడ్ఇన్()' పద్ధతిని వర్తింపజేయడం
ఈ ఉదాహరణ డిఫాల్ట్ విలువతో “fadeIn()” పద్ధతిని ఉపయోగించి దాచిన మూలకాన్ని చూపుతుంది. 400ms ”:
ఇచ్చిన దృష్టాంతానికి అనుగుణంగా బటన్ మూలకం యొక్క వచనం మార్చబడుతుంది:
< బటన్ > ఫేడ్ఇన్ ( చూపించు మూలకం ) బటన్ >ఇప్పుడు, వర్తించు ' fadeIn() కింది కోడ్ బ్లాక్‌ని ఉపయోగించే పద్ధతి:
< స్క్రిప్ట్ >$ ( పత్రం ) . సిద్ధంగా ( ఫంక్షన్ ( ) {
$ ( 'బటన్' ) . క్లిక్ చేయండి ( ఫంక్షన్ ( ) {
$ ( '#H2' ) . ఫేడ్ఇన్ ( ) ;
} ) ;
} ) ;
స్క్రిప్ట్ >
ఈ కోడ్ బ్లాక్‌లో, ' fadeIn() 'H2' idతో సరిపోలిన దాచిన మూలకాన్ని 400msలో అంటే డిఫాల్ట్ విలువలో చూపించడానికి ”పద్ధతి ఉపయోగించబడుతుంది.
అవుట్‌పుట్
ఇచ్చిన బటన్ క్లిక్ దాచిన మూలకాన్ని డిఫాల్ట్ సమయ వ్యవధిలో అంటే “400ms”లో క్రమంగా చూపుతుందని గమనించవచ్చు.
ముగింపు
j క్వెరీలో, మధ్య ఉన్న ఏకైక కీలక వ్యత్యాసం దాచు() మరియు వెళ్లి పోవడం() , షో() , మరియు fadeIn() పద్ధతి ' సమయ విరామం ”. “show()” మరియు “hide()” పద్ధతి డిఫాల్ట్‌గా వాటి కార్యాచరణలను వెంటనే నిర్వహిస్తుంది, అయితే “fadeIn()”, మరియు “fadeOut()” పద్ధతి డిఫాల్ట్ సమయ వ్యవధిలో అంటే “400ms”లో తమ విధులను నిర్వహిస్తాయి. ఈ పోస్ట్ j క్వెరీలో hide() మరియు fadeOut(), show(), and fadeIn() మధ్య ఉన్న కీలక వ్యత్యాసాలను ఆచరణాత్మకంగా వివరించింది.