Rev. 2.73

Script.aculo.us에서 지원하는 조합된 비주얼 이펙트(Combination Effects) 목록입니다. 이것은 Core Effects가 하나이상 조합되어 파생된 것들입니다. 지속시간(duration)과 변이(transition) 등을 옵션으로 사용할 수 있습니다. 특히, duration과 transition을 적절히 사용함으로 떨려보이거나 깨지는 현상을 잡을 수 있다. 이것에 대한 자세한 내용은 다음에 다루도록 합니다.

Effect.Appear, Effect.Fade : 엘리먼트가 서서히 나타나고 사라진다. [Fade], [Apper]

Effect.Appear('id_of_element');
Effect.Appear('id_of_element', { duration: 3.0 });
Effect.Fade('id_of_element');
Effect.Fade('id_of_element', { transition: Effect.Transitions.wobble })

* duration:1.0 (in seconds) - Fade는 지원하지 않음
* from:0.0-1.0 (percent of opacity to start)
* to:0.0-1.0 (percent of opacity to end)

Effect.Puff : 엘리먼트를 부풀린다. [Puff], [show]

Effect.Puff('id_of_element');

// with options
Effect.Puff('id_of_element', {duration:3});

* duration:1.0 (in seconds)
* from:0.0-1.0 (percent of opacity to start)
* to:0.0-1.0 (percent of opacity to end)

Effect.DropOut : 엘리먼트를 밑으로 버린다. [DropOut], [show]

Effect.DropOut('id_of_element');

Effect.Shake : 엘리먼트를 흔든다. [Shake]

Effect.Shake('id_of_element');

Effect.Highlight : 엘리먼트를 강조한다. [Highlight]

new Effect.Highlight('id_of_element', [options]);
new Effect.Highlight(element, [options]);

//Examples
new Effect.Highlight('my_field', {startcolor:'#ff99ff', endcolor:'#999999'})

주의! : Effect.Highlight 앞에 new를 선언하지 않으면 작동하지 않거나 오류가 발생하기도 함

* startcolor : Sets the color of first frame of the highlight the highlight. Defaults to ”#ffff99” (light yellow)
* endcolor : Sets the color of the last frame of the highlight. This is best set to the background color of the highlighted element. Defaults to ”#ffffff” (white)
* restorecolor : Sets the background color of the element after the highlight has finished. Defaults to the current background-color of the highlighted element.

Effect.SwitchOff : 엘리먼트가 스위치처럼 꺼진다. [SwitchOff] [show]

Effect.SwitchOff('id_of_element');

Effect.BlindDown, Effect.BlindUp : 엘리먼트를 가리린다. [BlindUp] [BlindDown]

Effect.BlindDown('id_of_element');
Effect.BlindUp('id_of_element');

// Make the transion longer by adding options.
Effect.BlindDown('id_of_element', {duration:3});

* scaleX:true, false
* scaleY:true, false
* scaleContent:true, false
* scaleFrom Center?:true, false
* scaleMode:‘box’,’contents’
* scaleFrom:100.0 (0%-100%)
* scaleTo:0 (0%-100%)
* duration:1

Effect.SlideDown, Effect.SlideUp : 엘리먼트를 미끄러지게 한다. [SlideUp] [SlideDown]

Effect.SlideDown('id_of_element');
Effect.SlideUp('id_of_element');

// Make the transion longer by adding options.
Effect.SlideDown('id_of_element', {duration:3});

주의! : 엘리먼트로 지정한 ID안에 무의미한 DIV태그를 감싸주어야 제대로 작동한다.

* scaleX:true, false
* 블라인드 옵션과 동일

Effect.Pulsate : 엘리먼트를 두근거리게 한다. [Pulsate]

Effect.Pulsate('id_of_element');

Effect.Squish : 엘리먼트를 으깬다. [Squish] [show]

Effect.Squish('id_of_element');

Effect.Fold : 엘리먼트를 접는다. [Fold] [show]

Effect.Fold('id_of_element');

Effect.Grow, Effect.Shrink: 엘리먼트를 성장하고 오그라들게 한다. [Grow] [Shrink]

Effect.Grow('id_of_element');
Effect.Shrink('id_of_element');

Effect.Grow can take an optional parameter: “direction”.
It can have those values: “top-left”,”top-right”,”bottom-left”,”bottom-right”,”center”.

Effect.toggle : 엘리먼트를 토글한다. [toggle appear] [toggle slide] [toggle blind]

Effect.toggle(element, ['appear' | 'slide' | 'blind'], [options] );

주의! : 슬라이드 효과의 경우 엘리먼트로 지정한 ID안에 무의미한 DIV태그를 감싸주어야 제대로 작동한다.

Options : 사용되는 효과와 동일하게 사용가능.

※ 이 페이지는 RSS리더기에서 비정상으로 보일 수 있으며 정상 작동하지 않을 수 있습니다.

Comments

Got something to add? You can just leave a comment.

Your Reaction Time!

captcha

avatar