小悠学习——快乐工作,悠闲生活.超全的IT开发手册!
HTML CSS JAVASCRIPT SQL PHP BOOTSTRAP JQUERY ANGULAR XML
×

jQuery UI 教程

jQuery UI 教程 jQuery UI 简介 jQuery UI 下载 jQuery UI 使用 jQuery UI 定制 jQuery UI 工作原理

jQuery UI 主题

jQuery UI 主题 jQuery UI ThemeRoller jQuery UI CSS 框架 API jQuery UI 设计主题

jQuery UI 部件库

jQuery UI 部件库 jQuery UI 扩展小部件 jQuery UI 小部件方法调用 jQuery UI 为什么使用部件库 jQuery UI 如何使用部件库

jQuery UI 参考手册

jQuery UI 1.10 API 文档 API 类别 - 特效(Effects) API 类别 - 特效核心(Effects Core) API 类别 - 交互(Interactions) API 类别 - 方法重载(Method Overrides) API 类别 - 方法(Methods) API 类别 - 选择器(Selectors) API 类别 - 主题(Theming) API 类别 - UI 核心(UI Core) API 类别 - 实用工具(Utilities) API 类别 - 小部件(Widgets)

jQuery UI 实例

jQuery UI 实例 拖动(Draggable) 放置(Droppable) 缩放(Resizable) 选择(Selectable) 排序(Sortable) 折叠面板(Accordion) 自动完成(Autocomplete) 按钮(Button) 日期选择器(Datepicker) 对话框(Dialog) 菜单(Menu) 进度条(Progressbar) 滑块(Slider) 旋转器(Spinner) 标签页(Tabs) 工具提示框(Tooltip) 特效(Effect) 显示(Show) 隐藏(Hide) 切换(Toggle) 添加 Class(Add Class) 移除 Class(Remove Class) 切换 Class(Toggle Class) 转换 Class(Switch Class) 颜色动画(Color Animation) 定位(Position) 部件库(Widget Factory)
 

jQuery UI 实例 - 特效(Effect)


对一个元素应用动画特效。

如需了解更多有关 .effect() 方法的细节,请查看 API 文档 .effect()

.effect() 演示

点击按钮预览特效。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 特效 - .effect() 演示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <style>
    .toggler { width: 500px; height: 200px; position: relative; }
    #button { padding: .5em 1em; text-decoration: none; }
    #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
    #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
    .ui-effects-transfer { border: 2px dotted gray; }
  </style>
  <script>
  $(function() {
    // 运行当前选中的特效
    function runEffect() {
      // 从中获取特效类型
      var selectedEffect = $( "#effectTypes" ).val();
 
      // 大多数的特效类型默认不需要传递选项
      var options = {};
      // 一些特效带有必需的参数
      if ( selectedEffect === "scale" ) {
        options = { percent: 0 };
      } else if ( selectedEffect === "transfer" ) {
        options = { to: "#button", className: "ui-effects-transfer" };
      } else if ( selectedEffect === "size" ) {
        options = { to: { width: 200, height: 60 } };
      }
 
      // 运行特效
      $( "#effect" ).effect( selectedEffect, options, 500, callback );
    };
 
    // 回调函数
    function callback() {
      setTimeout(function() {
        $( "#effect" ).removeAttr( "style" ).hide().fadeIn();
      }, 1000 );
    };
 
    // 根据选择菜单值设置特效
    $( "#button" ).click(function() {
      runEffect();
      return false;
    });
  });
  </script>
</head>
<body>
 
<div class="toggler">
  <div id="effect" class="ui-widget-content ui-corner-all">
    <h3 class="ui-widget-header ui-corner-all">特效(Effect)</h3>
    <p>
      Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
    </p>
  </div>
</div>
 
<select name="effects" id="effectTypes">
  <option value="blind">百叶窗特效(Blind Effect)</option>
  <option value="bounce">反弹特效(Bounce Effect)</option>
  <option value="clip">剪辑特效(Clip Effect)</option>
  <option value="drop">降落特效(Drop Effect)</option>
  <option value="explode">爆炸特效(Explode Effect)</option>
  <option value="fade">淡入淡出特效(Fade Effect)</option>
  <option value="fold">折叠特效(Fold Effect)</option>
  <option value="highlight">突出特效(Highlight Effect)</option>
  <option value="puff">膨胀特效(Puff Effect)</option>
  <option value="pulsate">跳动特效(Pulsate Effect)</option>
  <option value="scale">缩放特效(Scale Effect)</option>
  <option value="shake">震动特效(Shake Effect)</option>
  <option value="size">尺寸特效(Size Effect)</option>
  <option value="slide">滑动特效(Slide Effect)</option>
  <option value="transfer">转移特效(Transfer Effect)</option>
</select>
 
<a href="#" id="button" class="ui-state-default ui-corner-all">运行特效</a>
 
 
</body>
</html>

Easing 演示

本实例使用 HTML Canvas 元素,绘制了 jQuery UI 提供的所有 easings。 点击每个图可查看该 easing 的行为。。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 特效 - Easing 演示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <style>
  .graph {
    float: left;
    margin-left: 10px;
  }
  </style>
  <script>
  $(function() {
    if ( !$( "<canvas>" )[0].getContext ) {
      $( "<div>" ).text(
        "您的浏览器不支持 canvas,本演示需要在支持 canvas 的浏览器下进行。"
      ).appendTo( "#graphs" );
      return;
    }
 
    var i = 0,
      width = 100,
      height = 100;
 
    $.each( $.easing, function( name, impl ) {
      var graph = $( "<div>" ).addClass( "graph" ).appendTo( "#graphs" ),
        text = $( "<div>" ).text( ++i + ". " + name ).appendTo( graph ),
        wrap = $( "<div>" ).appendTo( graph ).css( 'overflow', 'hidden' ),
        canvas = $( "<canvas>" ).appendTo( wrap )[ 0 ];
 
      canvas.width = width;
      canvas.height = height;
      var drawHeight = height * 0.8,
        cradius = 10;
        ctx = canvas.getContext( "2d" );
      ctx.fillStyle = "black";
 
      // 绘制背景
      ctx.beginPath();
      ctx.moveTo( cradius, 0 );
      ctx.quadraticCurveTo( 0, 0, 0, cradius );
      ctx.lineTo( 0, height - cradius );
      ctx.quadraticCurveTo( 0, height, cradius, height );
      ctx.lineTo( width - cradius, height );
      ctx.quadraticCurveTo( width, height, width, height - cradius );
      ctx.lineTo( width, 0 );
      ctx.lineTo( cradius, 0 );
      ctx.fill();
 
      // 绘制底线
      ctx.strokeStyle = "#555";
      ctx.beginPath();
      ctx.moveTo( width * 0.1, drawHeight + .5 );
      ctx.lineTo( width * 0.9, drawHeight + .5 );
      ctx.stroke();
 
      // 绘制顶线
      ctx.strokeStyle = "#555";
      ctx.beginPath();
      ctx.moveTo( width * 0.1, drawHeight * .3 - .5 );
      ctx.lineTo( width * 0.9, drawHeight * .3 - .5 );
      ctx.stroke();
 
      // 绘制 easing
      ctx.strokeStyle = "white";
      ctx.beginPath();
      ctx.lineWidth = 2;
      ctx.moveTo( width * 0.1, drawHeight );
      $.each( new Array( width ), function( position ) {
        var state = position / width,
          val = impl( state, position, 0, 1, width );
        ctx.lineTo( position * 0.8 + width * 0.1,
          drawHeight - drawHeight * val * 0.7 );
      });
      ctx.stroke();
 
      // 点击时动态改变
      graph.click(function() {
        wrap
          .animate( { height: "hide" }, 2000, name )
          .delay( 800 )
          .animate( { height: "show" }, 2000, name );
      });
 
      graph.width( width ).height( height + text.height() + 10 );
    });
  });
  </script>
</head>
<body>
 
<div id="graphs"></div>
 
 
</body>
</html>