各种显示效果（Effect）

Effect效果对象

下拉效果&上拉效果

 

<div id="d1">

 aaaaaaa<p>bbbbbbbbbbbbbbbbb<p>ccccccccccccc<p>

</div>

 <a href="#" οnclick="Effect.BlindDown('d1',{});; return false;">BlindDown()</a>

<p>

  <a href="#" οnclick="Effect.BlindUp('d1',{});; return false;">BlindUp()</a>

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' });

  }