Блог разработчиков

Немного о фреймверке jQuery. События мыши, анимация, стилизация с помощью jQuery

09 августа 2014

События мыши

mousedown - нажатие клавиши мыши

mouseup - отжатие клавиши мыши

click - клик по элементу

dblclick - двойной клик по элементу

mousemove - движение курсора

mouseenter - наведение курсора на элемент, не учитывает на дочерние элементы

mouseleave - вывод курсора из элемента, не учитывает дочерние элементы

mouseout - вывод курсора из элемента

mouseover - наведение курсора на элемент

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

jQuery('body').mousedown(function(){
   jQuery(this).html('Нажатие');
});

Этот пример выведет слово «Нажатие» на экран когда будет нажата клавиша мыши

Простая анимация

hide — скрытие элемента без эффектов

show — появление элемента без эфектов

slideUp — скрытие элемента сворачиванием вверх

slideDown — появление элемента, разворачивает вниз

fadeIn — появление элемента с эффектом затемнения

fadeOut — скрытие элемента с эффектом затемнения

animate — позволяет воспроизводить более сложные анимации

Пример простой анимации:

jQuery('p').mousedown(function(){ 
   jQuery(this).fadeOut(); 
});

Этот пример скроет тег p при нажатии на него с эффектом затемнения

Пример анимации с animate

jQuery('p').click(function(){
   jQuery(this).animate({
      top: "50%",
      left: "50%", 
      marginLeft: "-75px", 
      marginTop: "-16px", 
      fontSize: "30px" 
   }); 
});

Или вот так

jQuery('p').click(function(){ 
   jQuery(this).css("position", "absolute").animate({ 
      top: "50%", 
      left: "50%", 
      marginLeft: "-75px", 
      marginTop: "-16px",
      fontSize: "30px" 
   }); 
});

Стилизация, добавление и удаление классов

css — добавляет оформление для элемента

addClass — добавляет класс для элемента

removeClass — удаляет класс у элемента

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

jQuery('p').click(function(){ 
   jQuery(this).css("color", "red");
});

по клику на тег p текст внутри него становится красного цвета

Пример использования addClass (removeClass работает наоборот, синтаксис тот же)

jQuery('p').click(function(){
   jQuery(this).addClass("newclass");
});

по клику на тег p добавляется класс newclass