scriptaculous 博客分类： ajax CSS

Effect.BlindDown('d1',{})函数的花括号里面{}可以跟参数：

duration:1.0; 这个数字表示动作持续时间。

delay: 0.5 延迟0.5秒再启动效果

如果想让一个Div开始的时候隐藏，点击下拉的时候才拉下，那么只需要将此Div的属性设为：display: none


上滚 | 下滚

这一组函数:

Effect.SlideUp('d1',{});

Effect.SlideDown('d1',{});

这组函数效果与Blind那一组基本一样，效果粗看起来差不多……我也是细心比较才发现的。原来Blind这一对内容是不会随着上拉或下拉而动的。而Slide中的内容会被拉上或拉下。


变色闪动

Effect.Highlight('d1',{duration:1.5})

此元素将会改变几次颜色并最终返回原来的颜色。


渐变显示效果

Effect.Appear(‘d1’,{})

原来的元素初始CSS为display:none,用此效果后渐渐显示，渐变的alpha滤镜效果。
膨胀消失效果

Effect.Puff(‘d1’,{})



消失后可以使用Element.show('d1') 再次将元素显示出来。


渐渐消失效果

Effect.Fade('d1')

渐渐显示效果

Effect.Appear('test_img')

震动效果

Effect.Shake(‘d1’,{})

此元素将会左右震动
闪烁效果

Effect.Pulsate('d1',{})

此函数通过alpha滤镜来进行闪烁。


长大效果

Effect.Grow("d1",

{duration:5.0, direction: 'bottom-right', opacityTransition: Effect.Transitions.linear});

其中:direction 是指的元素从什么方向进入。

如果不指定后面的参数，元素缺省是从下面的中间开始变大。没有alpha效果。

萎缩效果

Effect.Shrink(“d1”,{})

长大效果Grow()的相反效果。


Toggle各种效果

汉语里面不知道怎么翻译Toggle，大体意思是：当某物打开的时候触发就关闭，而关闭的时候触发就打开 的一种像”乒乓开关”的行为。这种行为在做页面时特别有用。

Effect.toggle('d2','BLIND')

Effect.toggle('d2',’appear’)

Effect.toggle('d2',’slide’)

…

似乎所有这种有着相反效果的函数都可以在这里设置Toggle, ’BLIND’中的效果名大小写不敏感。


取消效果函数

这几个函数真是乏善可陈……唯一要提的就是关于中止这几个动画过程的函数：cancel()

例如：

effect1=new Effect.SlideUp(‘d1’,{duration:10.0});

想要在这10秒钟中止动画过程： effect1.cancel()


效果队列

这个神秘的queue属性，还有待进一步学习……

function startTimeline() {

// 3x highlight in front

for(var i=0; i<3; i++)

new Effect.Highlight('d3', { duration: 1.0, queue: 'front' });



// insert scale at very beginning

new Effect.Scale('d1', 75, { scaleContent: true, duration: 1.0, queue: 'front' });



// parallel implied, delay 0.5 sec

new Effect.Highlight('d1', { delay: 0.5 });



// puff at end

new Effect.Puff('d2', { duration: 4.0, queue: 'end' });

}