Поочередное появление и скрытие элементов
Вызов этого метода приводит к плавному исчезновению (если элемент не скрыт) или появлению (если элемент скрыт) выбранных элементов на странице, за счет изменения прозрачности. Отметим, что после скрытия элемента, его css-свойство display становится равным none, а перед появлением, оно получает свое прежнее значение обратно. Метод имеет один вариант использования:
duration — продолжительность выполнения анимации (появления или скрытия). Может быть задана в миллисекундах или строковым значением 'fast' или 'slow' (200 и 600 миллисекунд). По умолчанию, анимация будет происходить за 400 миллисекунд.
easing — изменение скорости анимации (будет ли она замедляется к концу выполнения или наоборот ускорится). (см. описание)
callback — функция, заданная в качестве обработчика завершения анимации (появления или скрытия). Ей не передается никаких параметров, однако, внутри функции, переменная this будет содержать DOM-объект анимируемого элемента. Если таких элементов несколько, то обработчик будет вызван отдельно, для каждого элемента.
Примеры использования:
$("#leftFit").fadeToggle() | скроет/покажет элемент с идентификатором leftFit за 400 мс. |
$("#leftFit").fadeToggle(300) | в течении 1/3 секунды скроет/покажет элемент с идентификатором leftFit. |
$("#leftFit").fadeToggle("slow") | в течении 600 мс скроет/покажет элемент с идентификатором leftFit. |
Можно скрывать и показывать элементы с помощью изменения размеров и прозрачности, с помощью функций show(), hide().
Если вы хотите только показать или только скрыть элементы за счет изменения их прозрачности, воспользуйтесь методами .fadeIn(), .fadeOut()
В действии
При нажатии на кнопку элемент с картинкой и текстом будет поочередно появляться и исчезать:
~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~script src="https://code.jquery.com/jquery-1.4.4.js"~gt~~lt~/script~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~button~gt~Вуаля!~lt~/button~gt~~lt~br~gt~~lt~br~gt~ ~lt~div~gt~ ~lt~img src="/tags/images/yo.jpg" style="height:150px; float:right; margin:5px 5px"~gt~ ~lt~b~gt~Правило.~lt~/b~gt~ Ё должна использоваться: в случаях возможных разночтений; в словарях; в книгах для изучающих русский язык (т. е. детей и иностранцев); для правильного прочтения редких топонимов, названий или фамилий. Во всех остальных случаях наличие буквы ё только затрудняет чтение. Она плохо выглядит, зато хорошо звучит. ~lt~/div~gt~ ~lt~script~gt~ $("button").click(function () { $("div").fadeToggle("slow"); }); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~