jqueryUI 1.10

啧啧好犀利

.addClass()

不要以为就是单纯的加样式噢 

.addClass( className [, duration ] [, easing ] [, complete ] )

第一个参数className就不用讲了 第二个参数是how long the animation will run 

第三个参数很好玩的 它有好多value 其含义就是 控制我动画执行的各个阶段顺序 比如 先快后慢 或者等等 具体参数 http://api.jqueryui.com/easings/

最后一个就是动画结束之后立刻执行的方法咯

举个栗子 ： $('div').addClass('tree',1000,'easeInOutQuint');

 

.toggle()

原来以为这个就是隐藏和显示吧

后来发现有很多参数 很好玩呐

.toggle('blind')在我看来和.toggle()一样的效果

.toggle( "bounce", { times: 3 }, "slow" );会弹跳的效果 参数一目了然

类似效果 $( "div" ).effect( "bounce", "slow" );

.effect( "shake" ); 这个效果很好耶 比如你填写信息出错的时候 可以摇一摇你的输入框 机智

.toggle("clip") 上下往中间收起 再次点击展开

.toggle('drop')默认从右向左 

Possible Values: up, down, left, right.

.toggle('explode')类似变成小方块 从中间往四周依次消失

.toggle('fade')隐藏

.toggle( "fold" );从下往上收起 从右往左收起

相反效果

.show( "fold", 1000 );

.toggle( "highlight" );    color (default: "#ffff99") 高亮效果 高亮后消失 高亮后显示 类似hey pay attention

.toggle( "puff" );中间向四周消失

.toggle( "pulsate" );闪闪闪显示 闪闪闪消失 个人觉得 这个效果好搞笑哈哈哈哈哈

   

下面一个讲的是改变颜色 然后用的是 animate方法

父级元素的click事件触发 子元素的animate

举个栗子（from官网）：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Color Animation Demo</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <style>
  #elem {
    color: #006;
    background-color: #aaa;
    font-size: 25px;
    padding: 1em;
    text-align: center;
  }
  </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
 
<div id="elem">color animations</div>
<button id="toggle">animate colors</button>
 
<script>
$( "#toggle" ).click(function() {
  $( "#elem" ).animate({
    color: "green",
    backgroundColor: "rgb( 20, 20, 20 )"
  });
});
</script>
 
</body>
</html>

 

 

.hide()

本来以为就是简单的隐藏的哇 可以添加动画效果的哟

$( "div" ).hide( "drop", { direction: "down" }, "slow" );意思是向下慢慢的掉

 

.removeClass()

参数同.addClass()

 

.switchClass( removeClassName, addClassName [, duration ] [, easing ] [, complete ] )

 

那我就有个问题了 那switchClass和toggleClass()啥区别呢

机智 看参数 switchClass是删除某个 添加其他一个

toggleClass就是删除这个添加这个 got？

 

嘤嘤嘤 知道公司网站上的赞效果是怎么搞的了

 

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>transfer demo</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <style>
  div.green {
    width: 100px;
    height: 80px;
    background: green;
    border: 1px solid black;
    position: relative;
  }
  div.red {
    margin-top: 10px;
    width: 50px;
    height: 30px;
    background: red;
    border: 1px solid black;
    position: relative;
  }
  .ui-effects-transfer {
    border: 1px dotted black;
  }
  </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
 
<div class="green"></div>
<div class="red"></div>
 
<script>
$( "div" ).click(function() {
  var i = 1 - $( "div" ).index( this );
  $( this ).effect( "transfer", { to: $( "div" ).eq( i ) }, 1000 );
});
</script>
 
</body>
</html>

 

　　

 

posted @ 2013-10-11 21:51  binarytree  阅读(329)  评论(0)    收藏  举报