JQuery animation effects

Show and hide the Show () Hide () method can also have no parameters just to show and hide

$ ("#btnid"). Bind ("click", Function () {

$ ("#divid"). Show ("Slow", function () {//show method is used to display the first parameter of the element is the speed that is displayed, the second parameter is optional after the display finishes executing the function

Alert ("hahaha");

});

});

$ ("#btnid"). Bind ("Dbclick", function () {

$ ("#divid"). Hide ("Fast", function () {//hide method is used to hide the element the first parameter is a hidden speed, the second parameter is optional after the hide is finished executing the function

Alert ("hehe hey");

});

});

Toggle () Show or hide

$ ("#btnid"). Bind ("click", Function () {//For BTN binding Click event

$ ("divID"). Toggle ("Fast", function () {//If Div is hidden when the click button is displayed, Div is hidden when the div is displayed when the click button is shown

$ (this). val () = = "hidden"? $ (This). Val ("show"): $ (this). Val ("hidden"); Set the display of the BTN Val

});

});

Slideup () Only for elements that have already been shown slide up Slidedown () only for elements that have been hidden

$ ("#btnid"). Bind ("click", Function () {

if ($ (this). val () = = "hidden") {

$ ("#divid"). Slideup ("Fast", function () {///To hide the displayed div

$ ("#btnid"). Val ("show"); After hiding, set the Val of btn to show

});

} else{

$ ("#divid"). Slidedown ("Slow", function () {//To show the hidden div

$ ("#btnid"). Val ("hidden"); Display the btn Val to hide after

});

}

});

Slidetoggle () swipe up or down

$ ("#btnid"). Bind ("click", Function () {

$ ("#div"). Slidetoggle ("Fast", function () {//) if the div is displayed hide hidden then show

$ ("#btnid"). val () = = "Swipe down"? $ ("#btnid"). Val ("Swipe Up"): $ ("#btnid"). Val ("swipe Down");

});

});

FadeIn () Fade in (Load display) FadeOut () Fade Out (hide)

$ ("#btnid"). Bind ("click", Function () {

if ($ (this). val () = = "Fade in") {

$ ("#divid"). FadeIn ("Fast", function () {

$ (this). Val ("Fade Out");

});

} else{

$ ("#divid"). FadeOut ("Fast", function () {

$ (this). Val ("Fade in");

});

}

});

FadeTo () Setting fade transparency

$ ("span"). each (function (index) {

Switch (index) {

Case 0:

$ (this). FadeTo ("Fast", 0.2,function () {///The first parameter is the speed of the fade the second parameter is the transparency 0.0~1.0 between the third is the callback function (optional parameter)

Alert ("hahaha");

}); break;

Case 1:

$ (this). FadeTo ("Fast", 0.5,function () {

Alert ("hahaha");

}); break;

Case 2:

$ (this). FadeTo ("Fast", 0.9,function () {

Alert ("hahaha");

}); break;

}

});

Animate () Custom animation effects

$ ("span"). Animate ({width: "80px", Height: "80px"},3000,function () {

The first parameter is an optional set of styles multiple styles are separated by commas, the second argument is the speed of the animation in milliseconds, and the third parameter is an optional callback function

$ ("#divid"). HTML ("animation complete");

});

Animate () Move location

$ ("span"). Animate ({width: "+=80px", Height: "+=80px"},3000,function () {//move 80px 80px to the lower-right corner

The first parameter is an optional set of styles multiple styles are separated by commas, the second argument is the speed of the animation in milliseconds, and the third parameter is an optional callback function

$ ("#divid"). HTML ("animation complete");

});

The Stop () method stops the animation event

$ ("#divid"). Stop (False,false); Two parameters are optional the first indicates whether to stop the current animation the second indicates whether to complete the animation that is being performed

The delay () method delays the animation time

$ ("#divid"). Delay (2000); Delay the animation of the div by two seconds per millisecond

JQuery animation effects