Тази публикация ще обясни практическото прилагане на метода fadeOut() на jQuery за създаване на плавен ефект на избледняване.
Как да създадете плавни ефекти на избледняване с помощта на метода fadeOut() на jQuery?
jQuery ' отминава() ” скрива избрания елемент постепенно, като намалява неговата непрозрачност. Този метод променя състоянието на избрания елемент от видим на скрит. Скритият елемент не се показва на уеб страницата, докато потребителят не го покаже отново с помощта на „ избледнява() ” метод.
Синтаксис
$ ( селектор ) . отминава ( скорост, облекчаване, обратно повикване ) ;
Горният синтаксис поддържа следните незадължителни параметри за персонализиране на ефекта на избледняване:
- скорост: Той определя скоростта на ефекта на затихване в милисекунди. По подразбиране стойността му е „400ms“. Освен това поддържа две вградени стойности „бавно“ и „бързо“.
- облекчаване: Показва скоростта на избледняване на анимацията в различни точки. По подразбиране стойността му е „люлеене (по-бавно в началото/края и бавно в средата)“. Освен това работи и на „линейна (постоянна скорост при затихваща анимация)“.
- обратно повикване: Той дефинира дефинирана от потребителя функция, която се изпълнява след завършване на затихващата анимация, за да изпълни определената задача.
Нека използваме гореописания метод практически.
HTML код
Преди да преминете към метода „fadeOut()“, вижте следния HTML код, който създава примерен елемент „div“, върху който ще бъде изпълнен ефектът на изчезване:
< бутон > отминава ( Крия елемент ) бутон >< бр >< бр >< div id = 'myDiv' стил = 'височина: 80px; ширина: 300px; рамка: 2px плътно черно; поле: автоматично; подравняване на текст: център' >
< h2 > Добре дошли в Linuxhint h2 >
див >
В горните редове код:
- „ <бутон> ” добавя елемент бутон.
- „ ” таг създава div елемент с идентификатор „myDiv” и е стилизиран с помощта на следните свойства за стилизиране (височина, ширина, рамка, поле, подравняване на текст).
- Вътре в div, „ ” указва първия елемент на подзаглавие от ниво 2.
Сега започнете с първия пример.
Пример 1: Създаване на плавни ефекти на затихване със стойността по подразбиране fadeOut()
Първият пример скрива съответстващия елемент div чрез използване на метода „fadeOut()“ със стойността му по подразбиране „400ms“:
< сценарий >
$ ( документ ) . готов ( функция ( ) {
$ ( 'бутон' ) . щракнете ( функция ( ) {
$ ( '#myDiv' ) . отминава ( ) ;
} ) ;
} ) ;
сценарий >В горните кодови редове:
- Първо, „ готов() ” методът изпълнява дадените функции, когато текущият HTML документ/DOM е зареден.
- След това „ клик() ” изпълнява свързаната функция при щракване върху бутон, когато се щракне върху свързания с него селектор „бутон”.
- След това „ отминава() ” скрива достъпния div елемент, чийто идентификатор е „myDiv” за 400ms, т.е. стойност по подразбиране.
Изход
Забелязва се, че даденото щракване на бутон избледнява елемента div постепенно за „400ms“.
Пример 2: Създаване на плавни ефекти на затихване с параметъра fadeOut() „скорост“
Този пример използва метода „fadeOut()“ с вградените стойности (бавно/бързо) на параметъра „скорост“:
< сценарий >
$ ( документ ) . готов ( функция ( ) {
$ ( 'бутон' ) . щракнете ( функция ( ) {
$ ( '#myDiv' ) . отминава ( 'бавен' ) ;
} ) ;
} ) ;
сценарий >Сега „ отминава() ' методът преминава ' бавен ” като негов параметър за плавно създаване на ефекта на избледняване, т.е. променя избраното състояние на елемент div от видимо на скрито.
Изход
Може да се види, че избраният елемент div се скрива бавно при натискане на бутона.
Пример 3: Създаване на плавни ефекти на затихване с параметъра fadeOut() „продължителност“
Този пример прилага метода „fadeOut()“ със специфичен брой милисекунди като негов параметър за продължителност:
< сценарий >
$ ( документ ) . готов ( функция ( ) {
$ ( 'бутон' ) . щракнете ( функция ( ) {
$ ( '#myDiv' ) . отминава ( 6000 ) ;
} ) ;
} ) ;
сценарий >Сега методът „fadeOut()“ използва посочения брой милисекунди, за да скрие съответстващия елемент в дадената продължителност от време.
Изход
Горният изход скрива дадените промени на елемент div при щракване на бутон в даден интервал от време.
Пример 4: Създаване на плавни ефекти на затихване с функцията fadeOut() „обратно извикване“
Този пример изпълнява функция за обратно извикване при завършване на ефекта на изчезване чрез метода „fadeOut()“:
< сценарий >
$ ( документ ) . готов ( функция ( ) {
$ ( 'бутон' ) . щракнете ( функция ( ) {
$ ( '#myDiv' ) . отминава ( 4000 , функция ( ) {
конзола. дневник ( „Даденият div елемент е скрит успешно!“ )
} ) ;
} ) ;
} ) ;
сценарий >В посочения кодов блок:
- „ отминава() ” изчезва съответстващия елемент div за определен брой милисекунди и след това изпълнява предоставената функция за „обратно извикване”.
- Вътре в „ обратно повикване ”, функцията „ console.log() ” методът се прилага за показване на посочения оператор след завършване на ефекта на „изчезване”.
Изход
Вижда се, че „конзолата“ показва израз, дефиниран във функцията за обратно извикване, след като скрие дадения елемент div.
Пример 5: Създаване на плавни ефекти на затихване с параметъра fadeOut() за „облекчаване“
Този пример прилага метода „fadeOut()“ с възможните стойности на параметъра „easing“:
< сценарий >
$ ( документ ) . готов ( функция ( ) {
$ ( 'бутон' ) . щракнете ( функция ( ) {
$ ( '#myDiv' ) . отминава ( 4000 , 'линеен' ) ;
} ) ;
} ) ;
сценарий >Сега „ отминава() ” изпълнява ефекта на изчезване за определен брой милисекунди при постоянна скорост поради „ линеен ” стойност.
Изход
Изходът променя даденото състояние на елемента от видимо към скрито с постоянна скорост. Това е всичко за прилагането на ефекта „затихване“ върху елемента.
Заключение
За да създадете плавен ефект на избледняване, като използвате ' на jQuery отминава() ”, потребителят не изисква допълнителен параметър. Този метод избледнява, т.е. скрива елемента постепенно чрез промяна на неговата непрозрачност. Ако потребителят трябва да извърши ефект на затихване за определен брой милисекунди, изпълнете функция за обратно извикване, след което използвайте параметрите „скорост“, „облекчаване“ и „обратно извикване“ с метода „fadeOut()“. Тази публикация на практика обяснява метода fadeOut() на jQuery за създаване на плавен ефект на избледняване.