1
00:00:00,330 --> 00:00:01,500
Welkom terug.

2
00:00:01,500 --> 00:00:08,820
Dus toen ik in eerste instantie Jay queery introduceerde Ik heb gezegd dat het helpt ons dingen doen, zoals select elementen manipuleren ze op event luisteraars.

3
00:00:08,930 --> 00:00:11,990
En ik heb ook gezegd dat het helpt met effecten en animaties.

4
00:00:12,180 --> 00:00:22,000
Dus in deze video ga ik snel een voorbeeld van een aantal van die ingebouwde effecten te doen in het bijzonder ga ik twee grote categorieën van effecten fading effecten en dia's te laten zien.

5
00:00:22,250 --> 00:00:26,220
Dus ik ben op de Jay Corey dokken hier op de categorie effecten.

6
00:00:26,280 --> 00:00:36,010
Je kunt zien zijn er een flink aantal methoden die te maken hebben met effecten en ik ga om te beginnen door te laten zien van de fade-effecten, dus ik ga om te kijken naar fade out om te beginnen.

7
00:00:36,570 --> 00:00:49,470
Wat fadeout doet is je een element met een dollarteken of een set van elementen te kiezen en noem je dat fade-out op het en het zal dat element animeren van volledige dekking tot aan volledige transparantie of nul ondoorzichtigheid.

8
00:00:49,500 --> 00:00:57,380
Dus het in principe verdwijnt een element uit en je kunt een duur aantoont als je wilt dat het langzaam of snel of zeer traag zijn.

9
00:00:57,510 --> 00:00:59,690
U kunt een aantal milliseconden te bieden.

10
00:00:59,700 --> 00:01:06,630
De standaard is 400 milliseconden en dan kun je een callback te draaien op het einde dat ik zal laten zien in slechts een moment te bieden.

11
00:01:06,780 --> 00:01:18,660
Dus ik ga een nieuw bestand hier te maken om dit effect studie demo laten zien en ik zal gewoon kopiëren over onze structuur van de laatste demo pagina en deze zal J Querrey effecten noemen.

12
00:01:18,960 --> 00:01:27,000
Dus hebben we dat het opzetten en ik ga om zich te ontdoen van al deze content hier en dan ga ik naar toe te voegen in een paar divs.

13
00:01:27,120 --> 00:01:34,340
Laten we drie divs en we gaan deze divs gebruiken en fade ze uit en animeren hen en schuif ze op en neer.

14
00:01:34,450 --> 00:01:45,470
En dus ik ga hen wat inhoud in dit eerste te geven zal deze niet vervagen me de volgende.

15
00:01:45,900 --> 00:01:48,300
Ik smeek je alsjeblieft.

16
00:01:48,660 --> 00:01:52,380
En dan tot slot zullen we er een die Help help help zegt te hebben.

17
00:01:52,720 --> 00:01:55,790
Dus deze divs zijn wanhopig niet weg te worden vervaagd.

18
00:01:56,040 --> 00:01:58,210
Helaas is vandaag de dag is niet hun geluksdag.

19
00:01:58,410 --> 00:02:00,230
En we gaan ze worden uitvechten.

20
00:02:00,240 --> 00:02:06,720
Dus om dit duidelijker ga ik hier toe te voegen aan wat stijl aan ons leven, zodat ze een kleur die we kunnen zien verdwijnen maken.

21
00:02:07,110 --> 00:02:10,900
En ze hebben ook een breedte en hoogte die we kunnen zien schuiven op en neer.

22
00:02:10,950 --> 00:02:28,150
Dus ik ga alle divs te selecteren en geef ze een met 100 pixels en een hoogte van 100 pixels en een kleur achtergrond van wintertaling en laten opslaan en we zullen deze open te stellen.

23
00:02:28,860 --> 00:02:30,420
We hebben drie divs.

24
00:02:30,420 --> 00:02:32,570
Maar ik zou willen dat ze op dezelfde lijn.

25
00:02:32,880 --> 00:02:36,900
Dus een manier om dat te doen is met de vlotter links.

26
00:02:37,020 --> 00:02:39,880
Nu zijn ze allemaal in dezelfde lijn, maar ze bloeden in elkaar.

27
00:02:40,200 --> 00:02:43,020
Dus om te bevestigen dat we een marge toe te voegen.

28
00:02:43,020 --> 00:02:46,850
Dus we gewoon een marge van 20 pixels aan alle kanten.

29
00:02:46,860 --> 00:02:56,740
Nu komen we met drie pleinen en ze hebben elk wat tekst binnen en we echt niet nodig om overboord te gaan styling hen, omdat alles wat we gaan doen is te laten zien hoe we ze in en uit kan passen.

30
00:02:57,060 --> 00:03:03,060
Dus we gaan een knop omhoog top hier toe te voegen en deze knoop zal gewoon zeggen click me.

31
00:03:03,270 --> 00:03:08,000
En als we op deze knop klikt wat er zal gebeuren is dat onze animaties zal lopen.

32
00:03:08,220 --> 00:03:12,760
Dus ik klik op deze en deze drie items moeten fade-out te beginnen.

33
00:03:13,320 --> 00:03:22,500
Dus om te herhalen fade out zal een element te nemen van de volledige dekking of wat dan ook dekking Het is momenteel en vervaagde tot het punt van volledige transparantie.

34
00:03:22,500 --> 00:03:33,370
Dus het lijkt erop dat deze selecte dot fadeout en we kunnen een optionele reeks van de snelheid zo traag of snel te verstrekken of we kunnen het geven van een aantal milliseconden.

35
00:03:33,390 --> 00:03:34,490
Dus laat me je dat nu laten zien.

36
00:03:34,740 --> 00:03:39,870
Ik ben eigenlijk van plan om dit te doen in een apart bestand, dus ik ga een JavaScript-bestand te maken en op te slaan.

37
00:03:40,250 --> 00:03:52,470
Ik bel het van invloed is gewoon geniaal redden kluisje, dat had mijn alert aangesloten en gekoppeld dit samen juist de onderkant.

38
00:03:52,470 --> 00:03:54,020
Voeg gewoon een script tag.

39
00:03:54,480 --> 00:03:56,450
Bron gelijk effect.

40
00:03:56,560 --> 00:03:57,320
Ja.

41
00:03:57,690 --> 00:04:01,030
En als we vernieuwen krijgen we onze aangesloten alert.

42
00:04:01,350 --> 00:04:04,380
Dus wat we hier willen doen is Faid deze divs uit.

43
00:04:04,380 --> 00:04:10,040
Dus moeten we het apparaat, net als dat te selecteren en niet fade-out.

44
00:04:10,380 --> 00:04:13,290
En dan kunnen we een snelheid te bieden of verlaat het enkel als dat.

45
00:04:13,290 --> 00:04:20,630
En als dat is alles wat we willen doen of te vernieuwen en je kunt zien als de pagina wordt geladen ze beginnen te vervagen up.

46
00:04:20,640 --> 00:04:23,740
Dus laten we eigenlijk maken dat gebeuren als we op de knop.

47
00:04:24,090 --> 00:04:38,480
Dus gaan we willen een dollarteken knop dot doen en we kunnen ofwel klikken of ik dot doen op een snelle en vervolgens doorgeven aan onze callback functie.

48
00:04:38,640 --> 00:04:50,870
Dus toen we op zullen dan verdwijnen alle divs net als dat nu wordt vernieuwd en als ik klik je kunt zien dat ze allemaal verdwijnen.

49
00:04:50,980 --> 00:04:56,060
Dus zoals ik al zei kunnen we een aantal hier iets als 1000, die is een volle seconde bieden.

50
00:04:56,260 --> 00:05:02,370
En als ik vernieuw je zult zien wanneer ik op het duurt een volle seconde voor hen om uit te faden.

51
00:05:02,620 --> 00:05:12,400
Een belangrijk punt over fadeout is dat als ik de pagina hier te inspecteren en ik kijk naar de elementen divs zijn nog steeds in het team, hetzij nog in de slaapzaal.

52
00:05:12,430 --> 00:05:15,760
We hebben net zien ze niet omdat hun scherm is ingesteld op none.

53
00:05:15,760 --> 00:05:18,730
Dus het maakt ze niet verwijderen of hen niet van de pagina te verwijderen.

54
00:05:18,910 --> 00:05:20,010
Het is ze gewoon verstopt.

55
00:05:20,170 --> 00:05:22,890
En dat is zeker een belangrijk onderscheid.

56
00:05:22,990 --> 00:05:35,150
Dus laten we zeggen dat ik wilde gewoon een bericht af te drukken zodra de divs had verschoten uit, dus ik zou ze verdwijnen en dan zoiets als dit fade afgerond als het tenietgedaan log doen.

57
00:05:35,680 --> 00:05:39,590
En als ik dit run ik de console te openen en kijken naar de volgorde waarin dingen gebeuren.

58
00:05:39,730 --> 00:05:45,800
Dus als ik klik hier krijg ik Faid voltooid weg te gaan voordat de fade daadwerkelijk wordt gedaan.

59
00:05:46,090 --> 00:05:51,730
Dus wat gebeurt er hier is dat we selecteert u alle divs en we beginnen de fade-out, maar het duurt een volle seconde.

60
00:05:52,060 --> 00:05:56,280
En javascript wacht niet op die tweede te eindigen voordat hij verhuist naar de volgende regel.

61
00:05:56,350 --> 00:06:02,310
Het onmiddellijk verplaatst naar deze lijn en drukt Faid afwerking afgerond en dan is de fade out.

62
00:06:02,470 --> 00:06:11,390
Dus als we willen code gebeurt direct na de fade-out afwerking we willen dat het wordt gegarandeerd te zijn nadat we kunnen passeren in een callback hier.

63
00:06:11,440 --> 00:06:16,860
En dus dit callback zal worden genoemd binnenkant van de fadeout automatisch wanneer het klaar is.

64
00:06:17,020 --> 00:06:20,830
Dus ik ga naar onze constante log daar te verplaatsen en op te slaan.

65
00:06:21,300 --> 00:06:31,650
En als ik verfrissen en nu ik op de fade out afwerking en dan krijgen we 3 Fade voltooid console dot logs voor elk van die.

66
00:06:31,690 --> 00:06:39,220
Een meer voorkomende scenario in plaats van alleen het afdrukken van een string in de Consul is om de elementen daadwerkelijk verwijderen zodra we ze vervagen.

67
00:06:39,220 --> 00:06:42,580
Dus ik zei dat ze alleen verborgen ze niet echt verdwenen.

68
00:06:42,660 --> 00:06:51,940
En als we wilden te verwijderen zoals op onze lijst te doen wij gaan bouwen als we klik op de prullenbak naast een item we willen dat het vervagen langzaam doe een leuke animatie.

69
00:06:52,060 --> 00:06:55,620
Maar dan ook gewoon verwijderen van de pagina volledig uit de DOM.

70
00:06:55,810 --> 00:07:03,180
Dus moeten we een methode genaamd remove gebruiken en we willen alleen maar om het te verwijderen nadat de fadeout is voltooid.

71
00:07:03,340 --> 00:07:09,460
Dus dat ziet er als volgt alleen deze te verwijderen zal doen.

72
00:07:10,010 --> 00:07:13,930
En wat dit zal doen, is wachten totdat de fadeout is voltooid.

73
00:07:13,990 --> 00:07:17,050
En voor elke afd zal de methode verwijderen op het uit te voeren.

74
00:07:17,050 --> 00:07:20,430
Dus vernieuwen en klik op click me.

75
00:07:21,100 --> 00:07:29,850
Ze verdwijnen en dan als we over te gaan naar elementen die je kunt zien dat ons lichaam heeft slechts een knop nu en een tag alle divs zijn volledig verdwenen.

76
00:07:30,100 --> 00:07:39,130
En als ik die lijn uit opmerkingen te maken en te vernieuwen je kunt zien waar ze hier beginnen drie divs en ik klik op de knop en alles wat er gebeurt.

77
00:07:39,160 --> 00:07:42,910
Ze verdwijnen en dan display is ingesteld op none.

78
00:07:42,910 --> 00:07:52,850
Dus als ik mijn code op de verkeerde plaats en ik rende de methode Remove hier beneden deed ik alle divs stip te verwijderen, net als dat.

79
00:07:52,900 --> 00:07:57,080
Wat zou er eigenlijk gebeuren is dat de bestelling niet wordt gegarandeerd.

80
00:07:57,280 --> 00:07:59,210
En dit gaat om een ​​volle seconde duren.

81
00:07:59,410 --> 00:08:01,800
En deze code zal niet wachten tot dat de tweede te eindigen.

82
00:08:01,930 --> 00:08:06,410
Dus het zal beginnen te verdwijnen en vervolgens te verwijderen onmiddellijk na.

83
00:08:06,610 --> 00:08:13,490
Dus die eindigt op zoek als dit waar het begint te vervagen en net onmiddellijk nadat het hen verwijdert.

84
00:08:13,780 --> 00:08:16,450
Het is dus in principe geen fade at all.

85
00:08:16,480 --> 00:08:17,110
Dus dat is waarom J.

86
00:08:17,110 --> 00:08:26,810
Corey levert deze callback, want het is vrij normaal voor ons te willen om iets te doen nadat we iets vervagen of nadat we iets naar beneden schuiven of wat dan ook de animatie is.

87
00:08:26,830 --> 00:08:33,790
Dus dat brengt mij bij mijn volgende punt, dat is dat ik wil een aantal van de andere animaties die we kunnen doen, zodat we ook dingen vervagen te tonen.

88
00:08:34,030 --> 00:08:40,920
Dus als ik het scherm voor niemand in het begin als dit en ik vernieuwen.

89
00:08:41,020 --> 00:08:49,840
We niet de divs zien, omdat nu zijn ze liever verborgen dan ze uitfaden wanneer we op kunnen we ze verdwijnen in en het werkt net zoals je zou verwachten.

90
00:08:49,840 --> 00:09:00,350
Klik op de knop en ze verdwijnen in meer dan een seconde en dan als we willen een stukje code achteraf uit te voeren als we weten dat ze klaar bent met het vervagen in kunnen we een stukje code te zetten en zei dat als de callback hier.

91
00:09:00,970 --> 00:09:02,310
Oké dus dat is Faden.

92
00:09:02,350 --> 00:09:10,400
GK biedt nog een mooie fade methode die heet Faid toggle en Faid toggle werkt op dezelfde manier.

93
00:09:10,660 --> 00:09:18,080
Ik geef een aantal milliseconden en het zal weten of het nodig heeft om iets te vervagen in of uit, afhankelijk van of het nu getoond wordt of niet.

94
00:09:18,310 --> 00:09:27,020
Dus als ik te vernieuwen en ik klik op Fade toggle begint het door hen voeden in en dan vervagen ze allemaal uit en opnieuw in.

95
00:09:27,040 --> 00:09:35,860
Het is eigenlijk net als het toevoegen van een klasse tot de klasse lijst of met behulp van toggle klas met Jay Querrey, waar het enkel beslist of het nodig te vervagen in of fade-out.

96
00:09:35,860 --> 00:09:44,260
Oké dus dat is vervagen de volgende set van effecten die ik wil laten zien zijn deze schuiven effecten.

97
00:09:44,320 --> 00:09:49,170
Dus hier beneden hebben we een glijbaan naar beneden glijbaan toggle en schuif omhoog.

98
00:09:49,240 --> 00:10:01,060
Dus ik zal beginnen met glijbaan naar beneden en wat het doet is het neemt een element dat momenteel niet is te zien in plaats van het animeren van de dekking op een element als Faid doet het eigenlijk bezielt de hoogte van een element.

99
00:10:01,090 --> 00:10:03,030
Dus laat ik je zien hoe dat werkt.

100
00:10:03,130 --> 00:10:04,300
We gaat om dit te veranderen.

101
00:10:04,300 --> 00:10:07,870
Eerder dan vervagen toggle we gewoon naar beneden glijden.

102
00:10:08,650 --> 00:10:11,810
En dat is, want als we vernieuwen onze elementen zijn verborgen.

103
00:10:11,920 --> 00:10:21,270
Dus als ik zonder glijden wanneer we klikken op een knop die u zult zien dat de hoogte is geanimeerd beneden en hetzelfde geldt voor de slide-up.

104
00:10:21,400 --> 00:10:22,420
Het doet het tegenovergestelde.

105
00:10:22,480 --> 00:10:26,360
Dus als ik te ontdoen van het display op, zodat ze worden weergegeven.

106
00:10:26,710 --> 00:10:28,630
En nu heb ik klik op de knop.

107
00:10:28,630 --> 00:10:33,590
Hun hoogte is geanimeerd en ze naar boven schuiven en vervolgens het scherm instellen op None op het einde.

108
00:10:33,910 --> 00:10:41,540
En de andere methode is slide toggle die werkt net als Faid toggle wanneer hij besluit wat te doen.

109
00:10:41,650 --> 00:10:48,090
Dus als ik klik ze schuiven op en nu naar beneden glijden en weer terug omhoog en omlaag.

110
00:10:48,370 --> 00:10:51,740
Dus dat is alles wat er is om af te schuiven op schuif en schuif toggle.

111
00:10:51,760 --> 00:10:54,320
Ze waren net alsof ze Faid analoge methoden.

112
00:10:54,610 --> 00:10:57,580
Er is ook een optionele callback die we kunnen passeren.

113
00:10:57,790 --> 00:11:04,250
Dus als we een duur als 1 seconde en dan kan ik mijn oproep weer binnen te komen.

114
00:11:04,600 --> 00:11:09,380
En ik zal gewoon een andere con. dat log eind dia gedaan.

115
00:11:09,730 --> 00:11:15,250
En dat zal pas afgedrukt nadat de volledige tweede dia is voltooid.

116
00:11:15,250 --> 00:11:16,130
Dus ik vernieuwen.

117
00:11:16,270 --> 00:11:25,630
Laten we eens kijken naar de console en ze op click me en je kunt zien dat alleen gedrukt nadat de dia werd gedaan.

118
00:11:25,630 --> 00:11:28,380
Hetzelfde hier aandacht besteden hier.

119
00:11:28,390 --> 00:11:31,330
Dit verandert in zes.

120
00:11:31,330 --> 00:11:32,630
Daar gaan we.

121
00:11:33,290 --> 00:11:43,670
Maar nogmaals een meer gebruikelijke patroon is om de items te verwijderen zodra we ze hebben uitgeschoven of fade ze uit of wat we hebben gedaan is om ze te verwijderen.

122
00:11:43,690 --> 00:11:48,400
Dus hier zal het een tweede te nemen om hen te glijden en dan zijn ze verwijderd uit de pagina.

123
00:11:48,460 --> 00:11:53,970
En als we naar het tabblad elementen ons lichaam is leeg, behalve voor die knop en het script.

124
00:11:54,580 --> 00:11:58,810
Dus hopelijk geven ze je een goed idee van hoe een aantal van de effecten in een steengroeve werk.

125
00:11:58,810 --> 00:12:02,110
Dit zijn veruit de meest voorkomende fading en glijden.

126
00:12:02,110 --> 00:12:06,560
En we gaan om ze te gebruiken in plaats van ons naar lijst app die we gaan starten in de volgende video te doen.