С помощью эффектов jQuery Вы можете "оживить" Ваши веб-страницы.

Эффекты jQuery

С помощью jQuery методов fadeOut(), fadeIn() и fadeTo() Вы можете постепенно скрывать и отображать элементы анимировано.

Синтаксис:

//Позволяет постепенно скрыть выбранный элемент
$("селектор").fadeOut(скорость,функция);
//Позволяет постепенно отобразить выбранный элемент
$("селектор").fadeIn(скорость,функция);
//Позволяет постепенно скрыть/отобразить элемент до указанного значения прозрачности
$("селектор").fadeTo(скорость,прозрачность,функция);

Пример

$(document).ready(function(){
   
   $("#but1").click(function(){$("#par1").fadeOut(3000)});
   $("#but2").click(function(){$("#par1").fadeIn(3000)});
   $("#but3").click(function(){$("#par1").fadeTo(3000,0.3)});
   $("#but4").click(function(){$("#par1").fadeTo(3000,0.8)});
   $("#but5").click(function(){$("#par1").fadeOut(3000,function(){
      alert("Абзац был полностью скрыт.");
   });
   });

});

Попробовать в редакторе

С помощью jQuery методов slideUp, slideDown и slideToggle Вы можете плавно изменять высоту выбранных элементов.

Синтаксис:

//Позволяет изменяет высоту элемента до 0
$("селектор").slideUp(скорость,функция);
//Позволяет плавно возвратить элементу его изначальную высоту
$("селектор").slideDown(скорость,функция);
//При первом вызове будет действовать как slideUp, а при втором как slideDown
$("селектор").slideToggle(скорость,функция);

Пример

$(document).ready(function(){

   $("#but1").click(function(){$("#square").slideUp(3000)});
   $("#but2").click(function(){$("#square").slideDown(3000)});
   $("#but3").click(function(){$("#square").slideToggle(3000)});
   $("#but4").click(function(){$("#square").slideUp(3000,function(){
      alert("Текст был скрыт");
   });
   });

});

Попробовать в редакторе

С помощью метода slideToggle Вы можете создавать на Ваших страницах удобные выпадающие меню.

Пример

$(document).ready(function(){

   $("#menu").click(function(){$("#list").slideToggle(2000)});
   $("#menu").toggle(function(){
      $("#img").attr("src","menudown.gif")},function(){
      $("#img").attr("src","menuup.gif")
   });
   $("#menu").mouseover(function(){$("#menu").css("background-color","#01939a")});
   $("#menu").mouseout(function(){$("#menu").css("background-color","#006064")});

});

Попробовать в редакторе

Анимация в jQuery

С помощью метода animate() Вы можете создавать на Ваших страницах полноценную анимацию.

Синтаксис:

$("селектор").animate({стили},скорость,функция_смягчения,функция);

стили задает CSS стили для анимации (к элементу одновременно может быть применено несколько стилей).

скорость задает скорость анимации. Вы можете указать скорость используя предопределенные свойства: "slow", "fast", "normal" (медленно, быстро, нормально) или указать скорость в миллисекундах (1000 миллисекунд = 1 секунда).

функция_смягчения задает функцию, которая будет отвечать за плавность выполнения анимации.

функция указывает имя функции, код которой будет выполнен после завершения анимации.

Пример

$(document).ready(function(){

   $("#but1").click(function(){
      $("p").animate({fontSize:30},2000);
      $("p").animate({top:220},2000);
      $("p").animate({fontSize:"1em"},2000);
      $("p").animate({left:320},2000);
      $("p").animate({top:0,left:0},2000);
   });

});

Попробовать в редакторе

Обратите внимание: для того, чтобы воспользоваться свойствами позиционирования элемента необходимо вначале установить свойству position значение отличное от static.

Обратите внимание: полный список всех существующих эффектов jQuery с примерами их использования Вы найдете в нашем jQuery справочнике.

Сделайте сами

Задание 1 реализуйте подпункты перечисленные ниже путем добавления на страницу соответствующего jQuery кода:

При нажатии на кнопку с id=but1 абзац с id=par1 должен исчезать, а при нажатии на кнопку c id=but2 появляться.
При наведении курсора мыши на абзац с id=par2 он должен стать прозрачным (можно задавать любые значения прозрачности, но необходимо чтобы текст при этом был видим) в течении 3 секунд (3000 миллисекунд). При выведении курсора мыши за пределы абзаца он должен вернуть стандартные значения прозрачности.
При нажатии на кнопку с id=but3 высота элемента wrap1 должна быть уменьшена до 0 в течении 5 секунд. При нажатии на кнопку с id=but4 элементу wrap1 в течении 7 секунд должна быть возращена стандартная высота.
Создайте анимацию, перемещающую красный квадрат поочередно по всем черным квадратам с цифрами. Анимация должна активироваться при нажатии на кнопку с id=but5.

Пример

$(document).ready(function(){

//Пишите код здесь

});

Попробовать в редакторе

« Предыдущая глава Следующая глава »