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>
