RSS

《jQuery in Action》 in Action - Chapter 5

Labels:

sprucing up with animations and effects

jQuery框架提供的动画和效果只包含最基本的显示/隐藏,淡入/淡出和滑入/滑出,其他更高级的特效都通过设计好的接口分配给Plugin去做了。

以隐藏元素举例: hide(speed,callback)如果两个参数都不传,就是最简单的隐藏元素。speed接受毫秒为单位的整数或字符串,是指整个动画所需的时间,也可以传递“slow””fast””normal”。callback是指动画执行完毕后进行的回调。其他jQuery的动画方法大都类似。通过调用stop()方法停止某元素上的正在进行的动画,不过已经完成一半的动画效果会继续保留,不会回滚到动画初始状态。

如果这些简单的动画不能满足你的页面的UE设计,可以去找jQuery的特效插件,或者利用jQuery的动画接口自己实现:
animate(properties,duration,easing,callback)
所有数字化的css属性变化动画都可以用这个接口来实现,类似大小/透明度/颜色等,不是数字类型的属性理论上也没有“动画”的可能。因为大多数人应该不会去亲自去做特效Plugin,所以贴一段代码演示一下就不说明了:

$('.animateMe').each(function(){
$(this)
.css('position','relative')
.animate(
{
opacity: 0,
top: $(window).height() - $(this).height() -
$(this).position().top
},
'slow',
'swing',
function(){ $(this).hide(); });
});

上面的代码实现的就是为了强调某些删除动作时常用的渐变丢弃效果。

链接: 《jQuery in Action》 in action系列


0 Responses to "《jQuery in Action》 in Action - Chapter 5"

Post a Comment (友情提示:添加评论需要翻墙)