Kinds of effects Jquery

jQuery is a small JavaScript library that emphasizes open-sourced on the interaction between JavaScript and HTML. This library was released in January 2006 at BarCamp NYC by John Resig and dual licensed under MIT and GPL.

                < script src="jquery.min.js" <script type="text/javascript"> </ script>
                < script src="animasi1.js" <script type="text/javascript"> </ script>
                < script src="animasi2.js" <script type="text/javascript"> </ script>
                < script src="animasi3.js" <script type="text/javascript"> </ script>
                <style type="text/css">
                                . Amdhas {
                                                height: 232px; width: 432px; padding: 0; margin: 0; overflow: hidden;
                                                -Webkit-box-shadow: 2px 2px 4px # 000;
                                                -Moz-box-shadow: 2px 2px 4px # 000;
                                                -Moz-border-radius: 10px;
                                                -Webkit-border-radius: 10px;
                                                }
                                . Amdhas img {
                                                height: 200px; width: 400px; padding: 15px;
                                                border: 1px solid # ccc;
                                                background-color: # f8f8ff;
                                                -Webkit-border-radius: 10px;
                                                -Moz-border-radius: 10px;
                                                }
                </ Style>

<div class="amdhas" id="ke2">
                <img height="200" src=" PICTURE URL HERE " width="400" />
                <img height="200" src=" PICTURE URL HERE " width="400" />
                <img height="200" src=" PICTURE URL HERE " width="400" />
</ Div>

1.4.2 jquery drop down image effects

This effect can make a picture like falling down to the code given is:
$ ('# 2nd'). Cycle ({fx: 'scrollDown', speedIn: 2000, speedOut: 500, easeIn: 'bounceout', easeOut: 'backin', delay: -2000});

Jquery 1.4.2 speedin zoom effects, speedout

Jquery effect can make the picture be like the zoom, the code below:
$ ('# 2nd'). Cycle ({fx: 'zoom', speedIn: 2500, speedOut: 500, easeIn: 'bouncein', easeOut: 'easeout', sync: 0, delay: -4000});

Jquery 1.4.2 Slide diagonal

This effect will make the pictures into a slide a diagonal movement, the code that is given is:
$ ('# 2nd'). Cycle ({fx: 'custom', cssBefore: {left: 232, top: -232, display: 'block'}, animIn: {left: 0, top: 0}, animOut: {left: 232, top: 232}, delay: -3000});

Jquery 1.4.2 Slide the effect of vertical and horizontal

Effects of vertical and horizontal mengabungkannya be, please code below:
$ ('# 2nd'). Cycle ({fx: 'custom', sync: 0, cssBefore: {top: 0, left: 360, display: 'block'}, animIn: {left: 0}, animOut: { top: 232}, delay: -1000});

Jquery 1.4.2 opacity and zoom effects

It combines the effects of opacity and zoom, so when the picture disappears then suddenly there is another image that appears with a movement like the zoom. below:
$ ('# 2nd'). Cycle ({fx: 'custom', cssBefore: {left: 115, top: 115, width: 0, height: 0, opacity: 1, zIndex: 1}, animOut: {opacity: 0}, animIn: {left: 0, top: 0, width: 400, height: 200}, cssAfter: {zIndex: 0}, delay: -3000});

Jquery 1.4.2 Effect zoom in, zoom out

Jquery effect of this will make the picture be like the zoom in and zoom out to take turns, to the code are:
$ ('# 2nd'). Cycle ({fx: 'custom', cssBefore: {top: 0, left: 0, width: 0, height: 0, zIndex: 1}, animIn: {width: 400, height: 200}, animOut: {top: 200, left: 200, width: 0, height: 0}, cssAfter: {zIndex: 0}, delay: -1000});

JQuery 1.4.2 effects of jump or shuffle

If this effect is viewed as a frog jump, because these effects can make the picture be like to jump., And replaced with another image. For code that is given is:
$ ('# 2nd'). Cycle ({fx: 'shuffle', shuffle: {top: -280, left: 280}, easing: 'backinout', delay: -2000});

1.4.2 jquery horizontal curtain effect

Jquery effect it can create images like curtain. code:
$ ('# 2nd'). Cycle ({fx: 'curtainX', sync: false, delay: -2000});

JQuery 1.4.2 effects of vertical curtain

Vertical.
$ ('# 2nd'). Cycle ({fx: 'curtainY', sync: false, delay: -2000});

Jquery 1.4.2 covering the effects of image

This effect can make the image as a layered, if the view is not much different from the slide. Code is:
$ (Function () {$ ('# 2nd'). Cycle ({fx: 'cover', delay: -2000, cssBefore: {opacity: 1}, animOut: {opacity: 0}});});

Jquery 1.4.2 diagonal wipe effect

If the effect is like a window that was in the clear / wipe, very interesting if given a lot of pictures in it. Code that is given is:
$ ('# 2nd'). Cycle ('wipe');

1.4.2 jquery horizontal wipe effect

Jquery horizontal wipe effect is not much different from the diagonal only in the given speed, delay and clip. For the code is simple as below.
$ ('# 2nd'). Cycle ({fx: 'wipe', speed: 1000, timeout: 6000, delay: -4000, clip: 'L2R'});

Jquery 1.4.2 clip zoom effect

Effect on the clip and also as shown in the zoom. the code below.
$ ('# 2nd'). Cycle ({fx: 'wipe', speed: 1000, timeout: 6000, clip: 'zoom'});

Reference Code :

· http://plugins.jquery.com/projects/plugins/animation-and-effects

· http://docs.jquery.com/Tutorials

· http://plugins.jquery.com/plugin-tags/unique-effects

· http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

· http://www.authenticsociety.com/blog/jQueryPluginTutorial_Beginner
hhttp://id.wikipedia.org/wiki/JQuery

source : http://raihaanah.com/