Овај пост ће објаснити практичну примену јКуери-ове методе фадеОут() за стварање глатког ефекта затамњења.
Како да направите глатке ефекте затамњења користећи јКуери метод фадеОут()?
јКуери” избледети() ” метода постепено сакрива изабрани елемент смањујући његову непрозирност. Овај метод мења стање изабраног елемента из видљивог у скривено. Скривени елемент се не приказује на веб страници све док га корисник поново не прикаже користећи „ фадеИн() ” метод.
Синтакса
$ ( селектор ) . избледети ( брзина, ублажавање, повратни позив ) ;
Горња синтакса подржава следеће опционе параметре за прилагођавање ефекта затамњења:
- брзина: Одређује брзину ефекта бледења у милисекундама. Подразумевано, његова вредност је „400мс“. Штавише, такође подржава две уграђене вредности „споро“ и „брзо“.
- ублажавање: Приказује брзину бледеће анимације у различитим тачкама. Подразумевано, његова вредност је „љуљање (спорије на почетку/крају, а споро на средини)“. Поред тога, ради и на „линеарној (константној брзини у бледећој анимацији)“.
- позове: Дефинише кориснички дефинисану функцију која се извршава након завршетка анимације затамњења да би извршила дефинисани задатак.
Хајде да практично користимо горе дефинисани метод.
ХТМЛ код
Пре него што пређете на метод „фадеОут()“, погледајте следећи ХТМЛ код који креира пример „див“ елемента на коме ће се извршити ефекат фаде-оут:
< дугме > избледети ( Сакрити Елемент ) дугме >< бр >< бр >< див ид = 'миДив' стил = 'висина: 80 пиксела; ширина: 300 пиксела; ивица: 2 пиксела пуна црна; маргина: ауто; поравнање текста: центар' >
< х2 > Добродошли у Линукхинт х2 >
див >
У горњим редовима кода:
- „ <дугме> ” ознака додаје елемент дугмета.
- „ <див> ” ознака креира див елемент који има ид “миДив” и стилизује се уз помоћ следећих својстава стила (висина, ширина, ивица, маргина, поравнање текста).
- Унутар див, „ <х2> ” ознака одређује први елемент поднаслова нивоа 2.
Сада, почните са првим примером.
Пример 1: Креирајте глатке ефекте Фаде-Оут са фадеОут() подразумеваном вредношћу
Први пример сакрива подударни елемент див коришћењем методе „фадеОут()“ са подразумеваном вредношћу „400мс“:
< скрипта >$ ( документ ) . спреман ( функција ( ) {
$ ( 'дугме' ) . клик ( функција ( ) {
$ ( '#миДив' ) . избледети ( ) ;
} ) ;
} ) ;
скрипта >
У горњим редовима кода:
- Прво, „ спреман() ” метода извршава дате функције када се учита тренутни ХТМЛ документ/ДОМ.
- Затим, „ клик () ” метод извршава повезану функцију након клика на дугме када се кликне на припадајући бирач „дугмада“.
- Након тога, „ избледети() ” метод сакрива приступ елементу див чији је ид „миДив“ у 400мс, тј. подразумевана вредност.
Излаз
Примећено је да клик на дато дугме постепено гаси див елемент за „400мс“.
Пример 2: Креирајте глатке ефекте Фаде-Оут са фадеОут() параметром „спеед“
Овај пример користи метод „фадеОут()“ са уграђеним вредностима (споро/брзо) параметра „спеед“:
< скрипта >$ ( документ ) . спреман ( функција ( ) {
$ ( 'дугме' ) . клик ( функција ( ) {
$ ( '#миДив' ) . избледети ( 'спор' ) ;
} ) ;
} ) ;
скрипта >
Сада ' избледети() ” метод пропушта „ спор ” као параметар за глатко креирање ефекта избледења, тј. мења стање изабраног елемента див из видљивог у скривено.
Излаз
Може се видети да се изабрани див елемент полако сакрива на клик на дугме.
Пример 3: Креирајте глатке ефекте Фаде-Оут са фадеОут() параметром „дуратион“
Овај пример примењује метод „фадеОут()“ са одређеним бројем милисекунди као параметром трајања:
< скрипта >$ ( документ ) . спреман ( функција ( ) {
$ ( 'дугме' ) . клик ( функција ( ) {
$ ( '#миДив' ) . избледети ( 6000 ) ;
} ) ;
} ) ;
скрипта >
Сада, метода „фадеОут()“ користи наведени број милисекунди да сакрије подударни елемент у датом временском трајању.
Излаз
Горњи излаз сакрива дате промене елемента див након клика на дугме у датом временском интервалу.
Пример 4: Креирајте глатке ефекте Фаде-Оут са фадеОут() функцијом повратног позива
Овај пример извршава функцију повратног позива по завршетку ефекта фаде-оут преко методе „фадеОут()“:
< скрипта >$ ( документ ) . спреман ( функција ( ) {
$ ( 'дугме' ) . кликните ( функција ( ) {
$ ( '#миДив' ) . избледети ( 4000 , функција ( ) {
конзола. Пријава ( „Дати елемент див је успешно сакривен!“ )
} ) ;
} ) ;
} ) ;
скрипта >
У наведеном блоку кода:
- „ избледети() ” метод бледи подударни елемент див у одређеном броју милисекунди, а затим извршава обезбеђену функцију „повратног позива“.
- Унутар ' позове “ функција, “ цонсоле.лог() ” метода се примењује за приказ наведене изјаве након завршетка ефекта „фаде-оут“.
Излаз
Види се да „конзола“ приказује изјаву дефинисану у цаллбацк функцији након сакривања датог елемента див.
Пример 5: Креирајте глатке ефекте Фаде-Оут помоћу параметра фадеОут() „еасинг“
Овај пример примењује метод „фадеОут()“ са могућим вредностима параметра „еасинг“:
< скрипта >$ ( документ ) . спреман ( функција ( ) {
$ ( 'дугме' ) . кликните ( функција ( ) {
$ ( '#миДив' ) . избледети ( 4000 , 'линеарни' ) ;
} ) ;
} ) ;
скрипта >
Сада ' избледети() ” метода изводи ефекат фаде оут у одређеном броју милисекунди уз константну брзину због „ линеарне ” вредност.
Излаз
Излаз мења дато стање елемента из видљивог у скривено константном брзином. То је то за имплементацију ефекта „фаде-оут“ на елемент.
Закључак
Да бисте створили ефекат глатког избледења користећи јКуери-јев „ избледети() ” корисник не захтева никакав додатни параметар. Овај метод се гаси, тј. сакрива елемент постепено променом његове непрозирности. Ако корисник треба да изврши ефекат затамњења у одређеном броју милисекунди, извршите функцију повратног позива, а затим користите параметре „брзина“, „олакшавање“ и „повратни позив“ са методом „фадеОут()“. Овај пост је практично објаснио јКуери-јев метод фадеОут() за стварање глатког ефекта фаде-оут.