jQuery(七)、效果和动画

1 显示和隐藏

1、show([speed,[easing],[fn]])

显示隐藏的匹配元素。

参数:
  (1) spend:三种预定速度之一的字符串(‘show’,‘normal’,‘fast’)或表示动画时长的毫秒数值
  (2) easing:用来指定切换效果,默认为swing,可用参数linear
  (3) fn:在动画完成时执行的函数,每个元素执行一次

2、hide([speed,[easing],[fn]])

隐藏显示的元素。

2 滑动

1、slideDown([speed,[easing],[fn]])

通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个函数。

2、slideUp([speed,[easing],[fn]])

通过高度变化(向下减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个函数。

3、slideToggle([speed,[easing],[fn]])

通过高度变化来切换所有匹配元素的可见性(显示、隐藏),在显示或隐藏完成后可选地触发一个函数。

3 淡入淡出

1、fadeIn([speed,[easing],[fn]])

通过透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个函数。

2、fadeOut([speed,[easing],[fn]])

通过透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个函数。

3、fadeTo([speed,opacity,[easing],[fn]])

把所有匹配元素的透明度以渐进方式调整到指定透明度,并在动画完成后可选地触发一个函数。
参数:
  (1) opacity: 0 ~ 1之间表示透明度的数字。

4、fadeToggle([speed,[easing],[fn]])

通过透明度的变化来切换 所有匹配元素的淡入和淡出效果,并在动画完成后可选地触发一个函数。

4 自定义动画

1、animate(params[, spend] [,easing][, fn])

用于创建自定义动画。

该函数的关键在于指定动画形式及结果样式属性对象params。所有指定的属性必须用驼峰形式,比如marginTop代替margin-top。

参数:
  (1) params:一组包含作为动画属性和终值样式属性和值得集合。如:{width:'90%',height:'90%',borderWidth:10}

// 每次向右移动50px
$("#right").click(function(){
  $(".block").animate({left: '+50px'}, "slow");
});

2、stop([clearQueue], [jumpToEnd])

停止所有在指定元素上正在运行的动画。

如果队列中有等待执行的动画(并且clearQueue没有设为true),将马上执行所有动画。

参数:
  (1) clearQueue:如果设置为true,则清空动画执行队列。可以立即结束动画。
  (2) jumpToEnd:如果设置为true,则立即执行完动画队列。

5 设置

1、jQuery.fx.off

关闭页面上所有的动画。

2、jQuery.fx.interval

设置动画的显示帧速。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值