Эффекты

В параметре <Эффект> метода effect() (и в некоторых других методах) могут быть указаны следующие эффекты.

$("#div1").effect("blind", {
   mode: "show",
   direction: "horizontal"
}, 1000);
$("#div1").effect("bounce", {
   mode: "hide", // Скрыть элемент в конце эффекта
   direction: "right", // Элемент исчезнет вправо
   distance: 50, // Дистанция
   times: 5 // Количество колебаний
}, 500);
$("#div1").effect("clip", {
   mode: "show",
   direction: "horizontal"
}, 1000);
$("#div1").effect("drop", {
   mode: "hide",
   direction: "up"
}, 1000);
$("#div1").effect("explode", {
   mode: "show",
   pieces: 18
}, 1000);
$("#div1").effect("fold", {
   size: 30, // Ширина оставляемой части
   horizFirst: true // Начальное свертывание по горизонтали
}, 1000);
$("#div1").effect("highlight", { color: "#ff0000" }, 300);
$("#div1").hide("puff", { percent: 200 }, 1000);
$("#div1").effect("pulsate", {
   mode: "hide",
   times: 2
}, 1000);
$("#div1").effect("scale", {
   mode: "hide", // Скрываем элемент
   direction: "both", // Свертываем в точку
   // Свертываем в правый верхний угол
   origin: ["top","right"],
   percent: 0, // Конечный размер в процентах
   scale: "content"
}, 3000);
$("#div1").effect("shake", {
   direction: "up", // Элемент начнет движение вверх
   distance: 15, // Дистанция
   times: 5 // Количество перемещений
}, 500);
$("#div1").effect("size", {
   to: { height: 0, width: 0 }, // Свертываем в точку
   // Свертываем в левый нижний угол
  origin: ["bottom","left"],
   scale: "both"
}, 3000);
$("#div1").effect("slide", {
   mode: "hide", // Скрываем элемент
   direction: "up", // Сдвигаем вверх
   distance: 50 // Сдвинется на 50px вверх
}, 1000);

Пример использования метода effect() и эффекта transfer приведен в листинге 12.34.

Листинг 12.34. Модуль UI Effects, эффект Transfer

<!doctype html>
<html>
<head>
<title>Модуль UI Effects, эффект Transfer</title>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"></script>
<style>
body { font-size:10pt; font-family:Verdana, sans-serif; }
#div1 {
   width:100px; height:100px;
   padding:2px; border:1px solid #000000; text-align:center;
   background-color:#000000; color:#ffffff;
}
#div2 {
   position:absolute; top:250px; left:450px; width:50px; height:50px;
   border:1px solid #000000; background-color:#0000ff;
}
.cls1 { border:1px dotted #000000; background-color:#ff0000; }
</style>
<script>
$(document).ready(function() {
   $("#div1").click(function() {
      $(this).effect("transfer",
                     {className: "cls1", to: "#div2"}, 2000);
   });
});
</script>
</head>
<body>
<div id="div1">Щелкните мышью на этом блоке</div>
<div id="div2"></div>
</body>
</html>
Предыдущая статья Все статьи