jQuery UI 剪辑效果

简介

jQuery UI 是 jQuery 团队推出的一个 jQuery 插件合集，其中包括了一些常用的 UI 组件，如弹出框、日期选择器、拖拽、排序等。而其中一个组件就是剪辑效果（Clip）。

Clip 组件可以将元素从其初始位置剪辑并向另一个位置移动，然后再移回来，从而产生视觉上的效果。

特点

• 剪辑效果
• 视觉效果

使用

使用 Clip 组件需要引入 jQuery UI 中的 jquery-ui.min.js 文件。

HTML

首先需要一些准备工作，在 HTML 文件中添加需要进行 Clip 效果的元素。

<div class="clip">Hello, world!</div>

CSS

然后，在 CSS 文件中，需要对这个元素进行一些简单样式的设置。

.clip {
  position: absolute;
  width: 100px;
  text-align: center;
  border: 1px solid black;
  padding: 10px;
}

JavaScript

最后，在 JavaScript 中引入 Clip 组件，并对元素进行 Clip 效果的设定。

$(function() {
  $('.clip').on('click', function() {
    $(this)
      .animate({
        left: '+=50px'
      }, 500 )
      .animate({
        left: '-=50px'
      }, 500 );
  });
});

以上代码会对 class 为 clip 的元素进行 Clip 效果，即当点击该元素时，将该元素往右移动 50px ，接着再移回到原位置。

注意

• 前提条件是需要引入 jQuery UI 中的 jquery-ui.min.js 文件。
• jQuery UI Clip 组件是建立在 jQuery 动画之上的，因此，Clip 效果的实现方式与 jQuery 动画的实现方式是类似的，需要通过 JavaScript 代码来实现。