jQuery (5): события и анимация

категория: jQuery
Сегодня будут наконец-то события и разнообразные эффекты. Обработчики событий - это функции, скрипт которых выполняется только при совершении какого-то действия со стороны пользователя, например: - наведение курсора мыши на какой-то элемент; - нажатие мышью или клавишей на клавиатуре; - изменение содержимого формы, отправка формы и т.д. Пример события "щелчок мыши на элементе":
$("#button").click(function(){
  alert("Вы нажали на меня. Ура!");
});
Тут следует еще рассмотреть понятие функции в JS. Есть именованные и анонимные. Создадим обе функции для наглядного примера:
function some_name() {alert('Я именованная');}
function() {alert('Я не именованная');}
Далее рассмотрим самые используемые обработчики событий. С первым мы уже познакомились - это click() - мы на чем-то нажимаем и начинают выполняться определенные действия, описанные в обработчике. Например, при нажатии на ссылку с id="down", значение элемента span с id="count" уменьшается на 50 и выводится вместо предыдущего значения на экран. Объект event содержит информацию о произошедшем событии. Метод preventDefault() указывает браузеру не делать действие прописанное по умолчанию, т.е. не следовать по ссылке, а просто запустить обработчик:
$(document).ready(function(){
  $("a#down").click(function(event){
    event.preventDefault();
    var count = $("span#count").text();
    var new_count = parseInt(count) - 50;
    count.text(new_count);
  });
});
Следующий полезный обработчик - hover (over, out) - наведение курсора на объект. Добавим к элементу списка li новый класс newClass при попадании указателя мыши в пределы объекта, а когда курсор покидает область объекта - удалим класc:
$(document).ready(function(){
  $('li').hover(
    function(){
      $(this).addClass('newClass');
    },
    function(){
      $(this).removeClass('newClass');
    }
  );
});
Пишем теперь пример с нажатием на клавишу "s". Будет создаваться класс newClass элемента li, и удаляться при повторном нажатии:
$(document).ready(function(){
  $(document).keydown(function(event){
    if (event.which == 83){
      $("li").toggleClass('newClass');
    }
  });
});
Наконец-то добрались до анимации. Тут тоже весело :) Скрываем - hide(speed, callback), показываем - show(speed, callback), чередуемся - toggle(speed, callback). Можем задать параметр скорости анимации speed для всех методов: медленно - 'slow', средне - 'normal', быстро - 'fast' или задаем цыфрами в милисикундах. callback - функция, которая будет выполняться после завершения анимации. Свертывание снизу-вверх - slideUp(speed, callback), развернуть элемент сверху-вниз - slideDown(speed, callback), чередование - slideToggle(speed, callback). Исчезновение - fadeIn(speed, callback), появление - fadeOut(speed, callback), уменьшение свойства opacity (прозрачность) к заданному значению - fadeTo(speed, opacity, callback). opacity - значение прозрачности от 0 до 1. Ну и конечно же метод анимации стилевых свойств animate(params, options) и остановки анимации - stop(). params - свойства css, которые будем анимировать, options - свойства самой анимации. Думаю для анимации примеров не нужно - тут все понятно, всем успехов.


blog comments powered by Disqus