啧啧好犀利
.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官网):
Color Animation Demo color animations
.hide()
本来以为就是简单的隐藏的哇 可以添加动画效果的哟
$( "div" ).hide( "drop", { direction: "down" }, "slow" );意思是向下慢慢的掉
.removeClass()
参数同.addClass()
.switchClass( removeClassName, addClassName [, duration ] [, easing ] [, complete ] )
那我就有个问题了 那switchClass和toggleClass()啥区别呢
机智 看参数 switchClass是删除某个 添加其他一个
toggleClass就是删除这个添加这个 got?
嘤嘤嘤 知道公司网站上的赞效果是怎么搞的了
transfer demo