Появление и иcчезновение элементов за счет прозрачности
С помощью этих функций можно показывать и скрывать выбранные элементы на странице, за счет плавного изменения прозрачности. Отметим, что после скрытия элемента, его css-свойство display автоматически становится равным none, а перед появлением, оно получает свое прежнее значение обратно. Методы имеют два варианта использования:
duration — продолжительность выполнения анимации (появления или скрытия). Может быть задана в миллисекундах или строковым значением 'fast' или 'slow' (200 и 600 миллисекунд). По умолчанию, анимация будет происходить за 400 миллисекунд.
callback — функция, заданная в качестве обработчика завершения анимации (появления или скрытия). Ей не передается никаких параметров, однако, внутри функции, переменная this будет содержать DOM-объект анимируемого элемента. Если таких элементов несколько, то обработчик будет вызван отдельно, для каждого элемента.
duration — см. выше.
easing — изменение скорости анимации (будет ли она замедляется к концу выполнения или наоборот ускорится). (см. описание)
callback — см. выше.
Примеры использования:
| $("#leftFit").fadeOut() | элемент с идентификатором leftFit "растворится" за 400 мс. |
| $("#leftFit").fadeIn() | элемент с идентификатором leftFit "прояснится" за 400 мс. |
| $("#leftFit").fadeOut(300) | в течении 1/3 секунды элемент с идентификатором leftFit исчезнет. |
| $("#leftFit").fadeIn("slow") | в течении 600 мс появится элемент с идентификатором leftFit. |
Можно скрывать и показывать элементы с помощью сворачивания/разворачивания (за счет изменения высоты). Это делают функции slideUp(), slideDown().
В действии
При нажатии на текст "растворим" картинку, а после завершения этой анимации выведем текст:
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
~lt~style~gt~
#clickme{width:160px; border:1px solid gray; padding:3px; background-color:#eee; cursor:pointer}
~lt~/style~gt~
~lt~script src="https://code.jquery.com/jquery-latest.min.js"~gt~~lt~/script~gt~
~lt~/head~gt~
~lt~body~gt~
~lt~div id="clickme"~gt~
Получите уникальную методику обогащения, всего за 100 долларов
~lt~/div~gt~
~lt~img id="robot" src="/tags/images/100usd.jpg" alt=""/~gt~
~lt~div id="result"~gt~~lt~/div~gt~
~lt~script~gt~
$('#clickme').click(function(){
$('#robot').fadeOut('slow', function() {
$('#result').html("Ну, как всегда...");
});
});
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
