Various display effects (Effect)

Effect object drop-down Effect & pull-up Effect

 

<Div id = "d1">

Aaaaaaa <p> bbbbbbbbbbbbbbbbb <p> ccccccccccc <p>

</Div>

<A href = "#" onclick = "Effect. blindown ('d1 ', {}); return false;"> blindown () </a>

<P>

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

In the braces of the Effect. blindown ('d1 ', {}) function, {} can follow the parameters:

Duration: 1.0; this number indicates the duration of the action.

Delay: 0.5 delay, 0.5 seconds, restart Effect

If you want to hide a Div at the beginning and click the drop-down button to pull it down, set the property of this Div to: display: none.

 

Roll up and roll down

This group of functions:

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

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

The effects of these functions are basically the same as those of the Blind group, and the effects are roughly the same ...... I also found out carefully. In the past, the Blind content was not moved along with the pull-up or drop-down. The content in the Slide will be pulled or pulled down.

 

Color Changing and flashing effect

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

This element changes the color several times and returns the original color.

 

Gradient display

Effect. Appear ('d1 ',{})

The initial CSS of the original element is display: none. After this effect is used, the gradient alpha filter effect is gradually displayed.

Expansion and disappearance

Effect. Puff ('d1 ',{})

 

After the elements disappear, you can use Element. show ('d1 ') to display the elements again.

 

Gradually disappear

Effect. Fade ('d1 ')

Show effect gradually

Effect. Appear ('test _ img ')

Vibration Effect

Effect. Shake ('d1 ',{})

This element will vibrate left and right

Flashing Effect

Effect. Pulsate ('d1 ',{})

This function flashes through the alpha filter.

 

Growth Effect

Effect. Grow ("d1 ",

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

Where: direction refers to the direction in which the element enters.

If the following parameters are not specified, the elements increase from the center below by default. No alpha effect.

Shrinking Effect

Effect. Shrink ("d1 ",{})

The opposite effect of the Growth Effect Grow.

 

Toggle Effects

I don't know how to translate Toggle in Chinese. It generally means that when something is triggered when it is opened, it is closed, and when it is closed, it is triggered like a "ping-pong switch. This kind of behavior is particularly useful in page creation.

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

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

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

...

It seems that all functions with the opposite effect can be set Toggle here, and the effect name in 'blind' is case insensitive.

 

 

Cancel effect Function

These functions are really poor ...... The only thing to mention is the function used to abort These animation processes: cancel ()

For example:

Required T1 = new Effect. SlideUp ('d1 ', {duration: 10.0 });

To abort the animation process in these 10 seconds: effect1.cancel ()

 

Performance queue

This mysterious queue attribute remains to be learned ......

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

}