jQuery метод .fadeToggle()

Определение и применение

jQuery метод .fadeToggle() позволяет плавно изменить прозрачность для отдельных элементов (в зависимости от состояния элемента: из видимого в скрытое, либо из скрытого в видимое). Другими словами, метод производит анимацию изменения прозрачности выбранных элементов плавно переводя их из скрытого состояния в видимое, или наоборот из видимого состояния в скрытое.

jQuery синтаксис:

Синтаксис 1.4.4:

$( selector ).fadeToggle( duration, easing, complete )

duration - Number, или String

easing - String

complete - Function

$( selector ).fadeToggle( { options } ) // option: value (описание ниже)

options - PlainObject

Добавлен в версии jQuery

Значения параметров

Пример использования

Пример использования jQuery метода .fadeToggle()

Нажмите ▶, затем выполните действие из пояснения. Измените JavaScript и запустите пример ещё раз. В редакторе используется jQuery 4.0.0.

index.html

HTML

<button class="fadetoggle">Метод .fadeToggle()</button>
<hr />
<div></div>
<div></div>
<div></div>

main.js

JavaScript

$(document).ready(function () {
    $('.fadetoggle').click(function () {
        // задаем функцию при нажатиии на элемент с классом toggle
        $('div').fadeToggle(1000, 'linear', function () {
            // отображаем, или скрываем элементы <div> в документе
            console.log('toggle completed') // выводим в консоль браузера информацию о завершении метода для каждого элемента в наборе
        })
    })
})

style.css

CSS

div {
    display: inline-block;
    width: 75px;
    height: 150px;
    margin-right: 20px;
    background-color: green;
}

В этом примере с использованием jQuery метода .fadeToggle() мы при нажатии на кнопку плавно изменяем прозрачность для всех элементов <div> в документе, скрывая, либо отображая их. При этом мы указали для наших методов продолжительность анимации равную секунде (1000 миллисекунд), эффект анимации происходит с одинаковой скоростью от начала до конца (linear) и функцию, которая после завершения анимации выводит в консоль браузера информацию о завершении выполнения метода для каждого элемента в наборе совпавших элементов.

Рассмотрим следующий пример в котором передадим в качестве параметра методов .fadeToggle() объект, содержащий различные опции, которые будут контролировать анимацию:

Пример использования jQuery метода .fadeToggle() (объект в качестве параметра)

Нажмите ▶, затем выполните действие из пояснения. Измените JavaScript и запустите пример ещё раз. В редакторе используется jQuery 4.0.0.

index.html

HTML

<button class="fadetoggle">Метод .fadeToggle()</button>
<hr />
<div></div>
<div></div>
<div></div>

main.js

JavaScript

$(document).ready(function () {
    $('.fadetoggle').click(function () {
        // задаем функцию при нажатиии на элемент с классом fadetoggle
        $('div').fadeToggle({
            // плавно отображаем, или скрываем элементы <div> в документе
            duration: 800, // продолжительность анимации
            easing: 'linear', // скорость анимации
            complete: function () {
                // callback
                console.log('fadeToggle completed')
            },
            queue: false, // не ставим в очередь
        })
    })
})

style.css

CSS

div {
    display: inline-block;
    width: 75px;
    height: 150px;
    margin-right: 20px;
    background-color: orange;
}

В этом примере с использованием jQuery метода .fadeToggle() мы при нажатии на кнопку плавно изменяем прозрачность для всех элементов <div> в документе, скрывая, либо отображая их. При этом мы в качестве параметров методов передаем объект содержащий следующие параметры:

• продолжительность анимации равную 800 миллисекунд (duration: 800)
• эффект анимации происходит с одинаковой скоростью от начала до конца (easing: linear)
• функция, которая после завершения анимации выводит в консоль браузера информацию о завершении выполнения метода для каждого элемента в наборе совпавших элементов (complete: function).
• анимация не размещается в очереди эффектов (queue: false).