jQuery | fadeTo () с примерами

Опубликовано: 13 Декабря, 2021

FadeTo () - это встроенный в jQuery метод, который используется для изменения непрозрачности выбранного элемента.
Синтаксис:

$ (селектор) .fadeTo (скорость, непрозрачность, ослабление, call_function)

Здесь селектор - это выбранный элемент.
Параметр: принимает четыре параметра, которые указаны ниже:

speed: определяет скорость эффекта затухания.
непрозрачность: указывает на исчезновение, и это значение должно находиться в диапазоне от 0,0 до 1,0.
easing: определяет скорость в разных точках анимации.
call_function: это необязательный параметр и выполняет функцию после выполнения метода fadeTo.

Возвращаемое значение: не возвращает никакого значения.

Код jQuery для демонстрации работы метода fadeTo ():
Код №1:
В приведенном ниже коде не передается необязательный параметр функции.

 < html >
 
< head >
    < script src = " https://code.jquery.com/jquery-1.10.2.js " >
    </ script >
    < style >
        body {
            width: 40%;
            height: 100px;
            border: 2px solid green;
            padding: 20px;
        }
    </ style >
 
</ head >
 
< body >
    <!-- click on this paragraph and this paragraph will fade out -->
    < p >
        This paragraph will fade out !
    </ p >
    <!-- after clicking on this paragraph this paragraph will
 not fade out -->
    < p >
        This paragraph will not fade !
    </ p >
    <!-- jQuery code to show working of this method -->
    < script >
        $("p:first").click(function() {
            $(this).fadeTo("slow", 0.33);
        });
    </ script >
 
</ body >
 
</ html > 

Выход:
Перед тем, как нажать на любой абзац-

После нажатия на первый и второй абзацы-

Код №2:
В приведенном ниже коде передается необязательный параметр функции.

 < html >
 
< head >
    < script
    src = " https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js " >
    </ script >
    <!-- jQuery code to show the working of this method -->
    < script >
        $(document).ready(function() {
            $("button").click(function() {
                $("p").fadeTo(2000, 0.2, function() {
                    alert("The fadeTo effect has finished!");
                });
            });
        });
    </ script >
    < style >
        body {
            width: 40%;
            height: 100px;
            border: 2px solid green;
            padding: 20px;
        }
    </ style >
 </ head >
 
< body >
    <!-- this paragraph will fade out -->
    < p >This is a paragraph.</ p >
 
    <!-- click on this button and paragraph will fade out -->
    < button >Click me</ button >
 
</ body >
 
</ html > 

Выход:
Перед тем, как нажать кнопку «Нажми меня» -

После нажатия на кнопку «Нажми меня» -

JavaScript JQuery

jQuery | fadeTo () с примерами

РЕКОМЕНДУЕМЫЕ СТАТЬИ