Jquery effect using detailed _jquery

jquery is a same as prototype excellent JS development Library class, especially for CSS and XPath support, so that we write JS become more convenient! If you are not a JS master and want to write excellent JS effect, jquery can help you achieve the goal!

. Hide ()

Hides the matching element.

. Hide ()

This method does not accept any arguments.

. Hide ([Duration][,complete])
Duration

A string or number determines how long the animation will run.
Complete

The function to execute at the end of the animation execution.
. Hide ([Duration][,easing][,complete])
Duration

A string or number determines how long the animation will run.
Easing

A string that indicates which easing function to use for the transition.
Complete

The function to execute when the animation completes.
Usage:

$ (' button '). Click (function () {
$ (' P '). hide)
};
$ ("div"). Click (function () {
$ (this). Hide (2000,function () {
$ (this). Remove ()
})
})

. Show ()

Displays the matching element.

. Show ()

This method does not accept any arguments.
. Show ([Duration][,complete])
Duration

A string or number determines how long the animation will run.
Complete

The function to execute at the end of the animation execution.
. Show ([Duration][,easing][,complete])
Duration

A string or number determines how long the animation will run.
Easing

A string that indicates which easing function to use for the transition.
Complete

The function to execute when the animation completes.

Usage:

$ ("button"). Click (function () {
$ ("P"). Show ("slow");
});

$ ("div"). Show ("Fast", function Shownext () {
$ (a). Next ("Div"). Show ("Fast", shownext);
});

. Toggle ()

Shows or hides matching elements.

. Toggle ()

This method does not accept any arguments.
. Toggle ([Duration][,complete])
Duration

A string or number determines how long the animation will run.
Complete

The function to execute at the end of the animation execution.
. Toggle ([Duration][,easing][,complete])
Duration

A string or number determines how long the animation will run.
Easing

A string that indicates which easing function to use for the transition.
Complete

The function to execute when the animation completes.

Usage:

$ ("button"). Click (function () {
$ ("P"). Toggle ();
});
$ ("button"). Click (function () {
$ ("P"). Toggle ("slow");
});

. Animate ()

Executes a custom animation based on a set of CSS properties.

. Animate (Properties[,duration][,easing][,complete])
Properties

An object of CSS properties and values that the animation will move according to this group of objects.
Duration (default: 400)

A string or number determines how long the animation will run.
Easing (default swing)

A string that represents the overuse of the easing function.
Complete

The function to execute at the end of the animation execution.
. Animate (Properties,options)
Properties

An object of CSS properties and values that the animation will move according to this group of objects.
Options

A set of values that contain animation options.

Usage:

$ ("#go"). Click (function () {
$ ("#block"). Animate ({
width: "70%",
opacity:0.4,
MarginLeft: "0.6in",
fontsize: "3em",
borderwidth: "10px"
}, 1500);
});

$ ("#right"). Click (function () {
$ ('. Block '). Animate ({"Left": "+=50px"}, "slow");
});

Apply animations to all paragraphs so that their left property becomes 50, and transparency becomes 1 (that is, opaque, visible), and 500 milliseconds.

$ ("P"). Animate ({
left:50, opacity:1
}, 500);

. Delay ()

Set a delay to postpone execution of subsequent items in the queue.

. Delay (Duration[,queuename])
Duration

An integer that indicates the number of milliseconds to use to set the time when the next queue is deferred.
QueueName

A string that is the name of the queue.

Effect:

We can set a 800 millisecond delay between the <div id= "foo" > Slideup () and the. FadeIn () Animation:

$ (' #foo '). Slideup (Delay). FadeIn (400);

Hide and then display two div. The Green Div has a 800 millisecond delay before it is displayed.

$ ("button"). Click (function () {
$ ("Div.first"). Slideup. Delay (a). FadeIn (a);
$ ("Div.second"). Slideup. FadeIn ();
});

. Stop ()

Stops the animation that matches the element that is currently running.

. Stop ([clearqueue][,jumptoend])
Clearqueue

A Boolean value indicating whether to cancel the queue animation, default false;
Jumptoend

A Boolean value indicating whether the current animation completes immediately. Default false;
. Stop ([queue] [, Clearqueue] [, Jumptoend])
Queue

Stop the name of the animation queue.
Clearqueue

A Boolean value that indicates whether to cancel the animation in a queue. Default false.
Jumptoend

A Boolean value indicating whether the current animation completes immediately. Default false.

Usage:

$ ("#stop"). Click (function () {
$ (. block). Stop ();
}); Stop the animation immediately when you click the operation.

. FadeIn ()

Displays the matching elements in a fading way.

. FadeIn ([Duration][,complete])
Duration (default: 400)

A string or number determines how long the animation will run.

Complete

The function to execute when the animation completes.
. FadeIn (Options)

A set of values that contain animation options.
. FadeIn ([Duration][,easing][,complete])
Duration (default: 400)

A string or number determines how long the animation will run.

Easing (default: Swing)

A string that indicates which easing function to use for the transition

Complete

The function to execute when the animation completes.

Usage:

$ (". Btn2"). Click (function () {
$ ("P"). FadeIn ();
});

. fadeout ()

Hides the matching element by fading out.

. fadeout ([Duration][,complete])
Duration (default: 400)

A string or number determines how long the animation will run.
Complete

The function to execute when the animation completes.
. fadeout (Options)

A set of values that contain animation options.
. fadeout ([Duration][,easing][,complete])
Duration (default: 400)

A string or number determines how long the animation will run.
Easing (default: Swing)

A string that indicates which easing function to use for the transition
Complete

The function to execute when the animation completes.

Usage:

$ (". Btn2"). Click (function () {
$ ("P"). fadeout ();
});

. Fadeto ()

Adjusts the transparency of the matching element.

. Fadeto (Duration,opacity[,complete])
Duration

A string or number determines how long the animation will run.
Opacity

The number between 0 and 1 indicates the opacity of the target element
Complete

The function to execute when the animation completes.
. Fadeto (Duration,opacity[,easing][,complete])
Duration

A string or number determines how long the animation will run.
Opacity

The number between 0 and 1 indicates the opacity of the target element
Easing

A string that indicates which easing function to use for the transition

Complete

The function to execute when the animation completes.

Usage:

$ (' input '). Click (function () {
$ (' #div1 '). Fadeto ("Slow", 0.2,function () {
$ (' #div1 '). CSS ("disp　　　　　　　　　　Lay "," none ");
})
})

. Fadetoggle ()

Show or hide them by matching the opacity animation of the elements.

. Fadetoggle ([Duration][,easing][,complete])
Duration (default: 400)

A string or number determines how long the animation will run.
Easing (default: Swing)

A string that indicates which easing function to use for the transition
Complete

The function to execute when the animation completes.
. Fadetoggle (Opacity)
Opacity

A set of values that contain animation options.

Usage:

$ ("Input"). Click (function () {
$ (' #div1 '). Fadetoggle ()
})

. Slidedown ()

Displays a matching element with a slide animation.

. Slidedown ([Duration][,complete])
Duration

A string or number determines how long the animation will run.
Complete

The function to execute when the animation completes.
. Slidedown (Opacity)
Opacity

A set of values that contain animation options.
. Slidedown ([Duration][,easing][,complete])
Duration

A string or number determines how long the animation will run.

Easing

A string that represents the overuse of the easing function.

Complete

The function to execute when the animation completes.

Usage:

$ ("Input"). Click (function () {
$ (' #div1 '). Slidedown ()
})

. Slideup ()

Hides a matching element with a sliding animation.

. Slideup ([Duration][,complete])
Duration

A string or number determines how long the animation will run.
Complete

The function to execute when the animation completes.
. Slideup (Opacity)

Opacity

A set of values that contain animation options.
. Slideup ([Duration][,easing][,complete])
Duration

A string or number determines how long the animation will run.

Easing

A string that represents the overuse of the easing function.

Complete

The function to execute when the animation completes.

Usage:

$ ("Input"). Click (function () {
$ (' #div1 '). Slideup ()
})

. Slidetoggle ()

Displays or hides a matching element with a slide animation.

. Slidetoggle ([Duration][,complete])
Duration

A string or number determines how long the animation will run.
Complete

The function to execute when the animation completes.
. Slidetoggle (Opacity)
Opacity

A set of values that contain animation options.
. Slidetoggle ([Duration][,easing][,complete])
Duration

A string or number determines how long the animation will run.

Easing

A string that represents the overuse of the easing function.

Complete

The function to execute when the animation completes.

Effect:

$ ("Input"). Click (function () {
$ (' #div1 '). Slidetoggle ()
})

The above content is small series to introduce the jquery effect of the use of detailed, I hope you like.