Руководство по методам fadeIn() и fadeOut() в jQuery

Вы можете использовать jQuery-методы fadeIn() и fadeOut() для отображения или скрытия HTML-элементов, постепенно увеличивая или уменьшая их непрозрачность.

<script>
$(document).ready(function(){
    // Отображение параграфов
    $(".out-btn").click(function(){
        $("p").fadeOut();
    });
    
    // Затухание параграфов
    $(".in-btn").click(function(){
        $("p").fadeIn();
    });
});
</script>

Как и другие jQuery-методы эффектов, вы можете дополнительно указать параметр продолжительности или скорости для методов fadeIn() и fadeOut(), чтобы управлять продолжительностью анимации затухания. Длительности могут быть указаны либо с использованием одной из предопределенных строк 'slow' или 'fast', либо в количестве миллисекунд; более высокие значения указывают на более медленную анимацию.

<script>
$(document).ready(function(){
    // Постепенное отображение параграфов с разной скоростью
    $(".out-btn").click(function(){
        $("p.normal").fadeOut();
        $("p.fast").fadeOut("fast");
        $("p.slow").fadeOut("slow");
        $("p.very-fast").fadeOut(50);
        $("p.very-slow").fadeOut(2000);
    });
    
    // Постепенное затухание параграфов с разной скоростью
    $(".in-btn").click(function(){
        $("p.normal").fadeIn();
        $("p.fast").fadeIn("fast");
        $("p.slow").fadeIn("slow");
        $("p.very-fast").fadeIn(50);
        $("p.very-slow").fadeIn(2000);
    });
});
</script>

Вы также можете указать callback-функцию обратного вызова, которая будет выполняться после завершения методов fadeIn() или fadeOut(). Мы узнаем больше о функции обратного вызова в следующих главах.

<script>
$(document).ready(function(){
    // Отображаем предупреждающее сообщение после появления абзацев
    $(".out-btn").click(function(){
        $("p").fadeOut("slow", function(){
            // Код, который должен быть выполнен
            alert("The fade-out effect is completed.");
        });
    });
    
    // Отображаем предупреждающее сообщение после исчезновения в абзацах
    $(".in-btn").click(function(){
        $("p").fadeIn("slow", function(){
            // Код, который должен быть выполнен
            alert("The fade-in effect is completed.");
        });
    });
});
</script>

jQuery-метод fadeToggle()

jQuery-метод fadeToggle() отображает или скрывает выбранные элементы, анимируя их непрозрачность таким образом, что, если элемент первоначально отображается, он исчезает; если же скрит, он будет появляться (то есть переключать эффект затухания).

<script>
$(document).ready(function(){
    // Переключение абзацев с исчезновением
    $(".toggle-btn").click(function(){
        $("p").fadeToggle();
    });
});
</script>

Точно так же вы можете указать параметр продолжительности для метода fadeToggle(), например, метод fadeIn()/fadeOut(), чтобы управлять длительностью или скоростью анимации переключения затухания.

<script>
$(document).ready(function(){
    // Эффект fadeToggle() для параграфов с разными скоростями
    $(".toggle-btn").click(function(){
        $("p.normal").fadeToggle();
        $("p.fast").fadeToggle("fast");
        $("p.slow").fadeToggle("slow");
        $("p.very-fast").fadeToggle(50);
        $("p.very-slow").fadeToggle(2000);
    });
});
</script>

Точно так же вы можете также указать callback-функцию обратного вызова для метода fadeToggle().

<script>
$(document).ready(function(){
    // Отображаем предупреждающее сообщение после исчезновения переключения пунктов
    $(".toggle-btn").click(function(){
        $("p").fadeToggle(1000, function(){
            // Код, который должен быть выполнен
            alert("The fade-toggle effect is completed.");
        });
    });
});
</script>

jQuery-метод fadeTo()

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

$(selector).fadeTo(speed, opacity, callback);

Обязательный параметр непрозрачности указывает конечную непрозрачность целевых элементов, которая может быть числом от 0 до 1. Параметр продолжительности или скорости также требуется для этого метода, который задает продолжительность затухания анимации.

<script>
$(document).ready(function(){
    // Эффект fadeTo() к абзацам с различной непрозрачностью
    $(".to-btn").click(function(){
        $("p.none").fadeTo("fast", 0);
        $("p.partial").fadeTo("slow", 0.5);
        $("p.complete").fadeTo(2000, 1);
    });
});
</script>