Translate topic: Events and Effects (part II)

This commit is contained in:
Ev Bogdanov 2018-08-31 00:57:46 +03:00
parent d8beb06518
commit 656ef60a39

View File

@ -57,4 +57,46 @@ $('#btn').mousemove(onAction); // Когда переместили курсор
$('#btn').mouseenter(onAction); // Когда навели курсор на элемент
$('#btn').mouseleave(onAction); // Когда сдвинули курсор с элемента
// Вы можете не только обрабатывать события, но и вызывать их
$('#btn').dblclick(); // Вызвать двойной клик на элементе
// Для одного селектора возможно назначить несколько обработчиков событий
$('#btn').on(
{dblclick: myFunction1} // Обработать двойной клик
{blur: myFunction1} // Обработать исчезновение фокуса
);
// Вы можете перемещать и прятать элементы с помощью методов-эффектов
$('.table').hide(); // Спрятать элемент(ы)
// Обратите внимание: вызов функции в этих методах всё равно спрячет сам элемент
$('.table').hide(function(){
// Сначала спрятать элемент, затем вызвать функцию
});
// Вы можете хранить селекторы в переменных
var tables = $('.table');
// Некоторые основные методы для манипуляций с документом:
tables.hide(); // Спрятать элемент(ы)
tables.show(); // Показать элемент(ы)
tables.toggle(); // Спрятать/показать
tables.fadeOut(); // Плавное исчезновение
tables.fadeIn(); // Плавное появление
tables.fadeToggle(); // Плавное исчезновение или появление
tables.fadeTo(0.5); // Изменение прозрачности
tables.slideUp(); // Свернуть элемент
tables.slideDown(); // Развернуть элемент
tables.slideToggle(); // Свернуть или развернуть
// Все эти методы принимают скорость (в миллисекундах) и функцию обратного вызова
tables.hide(1000, myFunction); // Анимация длится 1 секунду, затем вызов функции
// В методе 'fadeTo' вторым параметром обязательно идёт прозрачность
tables.fadeTo(2000, 0.1, myFunction); // Прозрачность меняется в течение 2 секунд до 0.1, затем вызывается функция
// Метод 'animate' позволяет делать более продвинутую анимацию
tables.animate({"margin-top": "+=50", height: "100px"}, 500, myFunction);
```