Kā jQuery atšķirt hide() un fadeOut(), show() un fadeIn()?

Ka Jquery Atskirt Hide Un Fadeout Show Un Fadein



jQuery piedāvā hide() un fadeOut(), kas slēpj atlasīto HTML elementu, un metode show() un fadeIn() parāda slēpto elementu. Visas šīs metodes galvenokārt maina elementa stāvokli, t.i., no slēpta uz redzamu un redzamu uz slēptu, pamatojoties uz to nosaukumiem un funkcijām. Saskaņā ar šo koncepciju un to nosaukumiem tie ir līdzīgi viens otram. Tomēr tie atšķiras dažu citu faktoru dēļ.

Šajā ziņā ir izceltas galvenās atšķirības starp hide() un fadeOut(), show() un fadeIn() programmā jQuery.

Pirms pāriet uz atšķirību starp hide() un fadeOut(), show() un fadeIn() programmā jQuery, vispirms apskatiet šo metožu pamatus, izlasot šīs rokasgrāmatas:







  • jQuery fadeIn() metode
  • jQuery fadeOut() metode
  • JavaScript JQuery Slēpt() metode | Paskaidroja
  • JQuery Show() metode | Paskaidroja

Vispirms skatiet atšķirību starp hide() un fadeOut() metodēm programmā jQuery.



Atšķiriet hide() un fadeOut() programmā jQuery

Vienīgā galvenā atšķirība starp ' slēpt () ' un ' izbālēt() ” metode ir:



  • Laika intervāls : ' slēpt () ” metode pēc noklusējuma paslēpj elementu, nekavējoties mainot tā necaurredzamību no 100 uz 0, nepatērējot nekādu laika intervālu, savukārt “ izbālēt() Metode izzūd, t.i., elementu pakāpeniski paslēpj “400 ms”, kas ir tā noklusējuma vērtība.

Apskatīsim norādītās atšķirības praktisko īstenošanu.





Vispirms apskatiet šo HTML kodu:

< centrs >

< h2 id = 'H2' > Laipni lūdzam Linuxhint ! h2 >

< pogu > Slēpt elementu pogu >

centrs >

Iepriekš minētajās koda rindās:



  • ' ” tags pielāgo norādīto elementu izlīdzināšanu tīmekļa lapas centrā.
  • '

    ” tags izveido 2. līmeņa apakšvirsrakstu ar ID “H2”.

  • ' ” tags ievieto jaunu pogu.

Piezīme: Iepriekš minētais HTML kods tiek ievērots visā šajā rokasgrāmatā.

Piemērs: jQuery “hide()” metodes lietošana ar “Noklusējuma” vērtību

Šajā piemērā tiek lietots “hide()” ar tā noklusējuma vērtībām, lai paslēptu elementu:

< skripts >

$ ( dokumentu ) . gatavs ( funkciju ( ) {

$ ( 'poga' ) . klikšķis ( funkciju ( ) {

$ ( '#H2' ) . paslēpties ( ) ;

} ) ;

} ) ;

skripts >

Iepriekš minētajās koda rindās:

  • Pirmkārt, ' gatavs () ” metode tiek izmantota, lai izpildītu norādītās funkcijas, kad tiek ielādēts pašreizējais HTML dokuments.
  • Tālāk “ klikšķis() ” metode ir atbildīga par saistītās funkcijas izpildi, noklikšķinot uz pogas.
  • Pēc tam ' slēpt () ” metode uzreiz paslēpj piekļūto virsraksta elementu, kura ID ir “H2”.

Izvade

Redzams, ka virsraksta elements paslēpjas uzreiz pēc pogas nospiešanas.

Piemērs: jQuery “fadeOut()” metodes lietošana ar “noklusējuma” vērtību

Šajā piemērā tiek izmantota metode “fadeOut()” ar tās noklusējuma vērtībām, lai pakāpeniski paslēptu doto elementu “400 ms”.

Šajā scenārijā tiek mainīts elementa “pogas” saturs:

< pogu > izbālēt ( Slēpt Elements ) pogu >

Tagad ieviesiet metodi “fadeOut()” šādā veidā:

< skripts >

$ ( dokumentu ) . gatavs ( funkciju ( ) {

$ ( 'poga' ) . klikšķis ( funkciju ( ) {

$ ( '#H2' ) . izbālēt ( ) ;

} ) ;

} ) ;

skripts >

Šajā laikā ' izbālēt() ” metode tiek izmantota, lai izgaisinātu pieejamo virsraksta elementu ar 400 ms, t.i., noklusējuma vērtību.

Izvade

Izvade skaidri parāda, ka dotais pogas klikšķis paslēpj virsraksta elementu pakāpeniski noklusējuma laika intervālā, t.i. '400 ms'.

Atšķirība starp show() un fadeIn() programmā jQuery

Līdzīgi kā “hide()” un “fadeOut()”, tā pati atšķirība ir starp “show()” un “fadeIn()” metodēm:

  • Laika intervāls : ' parādīt () ” metode pēc noklusējuma parāda slēpto elementu, nekavējoties mainot tā necaurredzamību no 0 uz 100, savukārt “ fadeIn() ” metode slēpto elementu parāda pakāpeniski “400 ms”, kas ir tā noklusējuma vērtība.

Piemērs: jQuery “show()” metodes lietošana ar “Noklusējuma” vērtību

Šis piemērs izmanto “show()” ar tā noklusējuma vērtībām, lai parādītu slēpto elementu.

Vispirms apskatiet sniegto HTML koda bloku:

< centrs >

< pogu > Rādīt elementu pogu >

< h2 id = 'H2' stils = 'displejs: nav' > Laipni lūdzam Linuxhint ! h2 >

centrs >

Saskaņā ar šo scenāriju dotais virsraksta elements tiek paslēpts, izmantojot “ displejs: nav ” īpašums.

Tagad izpildiet norādīto koda bloku, lai izprastu metodes “show()” praktisko ieviešanu:

< skripts >

$ ( dokumentu ) . gatavs ( funkciju ( ) {

$ ( 'poga' ) . klikšķis ( funkciju ( ) {

$ ( '#H2' ) . parādīt ( ) ;

} ) ;

} ) ;

skripts >

Iepriekš minētais koda bloks izmanto ' parādīt () ” metodi, lai nekavējoties parādītu pievienoto slēpto elementu.

Izvade

Redzams, ka pogas klikšķis uzreiz parāda slēpto virsraksta elementu.

Piemērs: jQuery “fadeIn()” metodes lietošana ar “Noklusējuma” vērtību

Šis piemērs parāda slēpto elementu, izmantojot metodi “fadeIn()” ar noklusējuma vērtību “ 400 ms ”:

Pogas elementa teksts tiek mainīts atbilstoši dotajam scenārijam:

< pogu > izbalināt ( Rādīt Elements ) pogu >

Tagad izmantojiet “ fadeIn() ” metodi, izmantojot šādu koda bloku:

< skripts >

$ ( dokumentu ) . gatavs ( funkciju ( ) {

$ ( 'poga' ) . klikšķis ( funkciju ( ) {

$ ( '#H2' ) . izbalināt ( ) ;

} ) ;

} ) ;

skripts >

Šajā koda blokā ' fadeIn() ” metode tiek izmantota, lai parādītu slēpto elementu, kas ir saskaņots ar ID “H2” 400 ms, t.i., noklusējuma vērtību.

Izvade

Var novērot, ka dotais pogas klikšķis slēpto elementu parāda pakāpeniski noklusējuma laika intervālā, t.i. “400ms”.

Secinājums

Programmā jQuery vienīgā galvenā atšķirība starp slēpt () un izbālēt() , parādīt () , un fadeIn() metode ir ' Laika intervāls ”. Metode “show()” un “hide()” pēc noklusējuma izpilda savas funkcijas nekavējoties, savukārt metode “fadeIn()” un “fadeOut()” veic savus uzdevumus noklusējuma laika intervālā, t.i., “400 ms”. Šī ziņa praktiski izskaidro galvenās atšķirības starp hide () un fadeOut (), show () un fadeIn () programmā jQuery.