jQuery effects (Effects)

 

One of the most powerful uses of JavaScript applications on client web pages is dynamic effects. You often need to write several lines of code for an effect using pure JavaScript, and jQuery Effects helps you wrap many commonly used special effects. Now You only need to write a few lines of Code to do things.

Basics

.show([duration] [, complete])

.show() Show hidden elements

// HTML
<p style="display: none">Hello</p>
// jQuery
$('p').show();

Animation effects can also be added, and a function can be executed after the animation ends. Duration can be set to three predetermined speeds "slow", "normal", "fast", or set the animation interval in milliseconds (ms).

// HTML
<p style="display: none">Hello</p>
// jQuery
$('p').show(5000);

.hide([duration] [, complete])

To hide the displayed elements, the usage is the same as that of the .show() function.

// HTML
<p>Hello</p>
// jQuery
$('p').hide('fast');

Hello

.toggle([duration] [, complete])

Switch the display/hide status alternately.

// HTML
<button>Toggle</button>
<p>Hello</p>
<p style="display: none">Good Bye</p>
 
// jQuery
$('button').click(function() {
  $('p').toggle();
});

Sliding

Compared with .show(), .hide(), .slideDown(), .slideUp(), it is a sliding effect to show/hide elements.

.slideDown([duration] [, complete])

Display elements with sliding down effects.

// HTML
<p style="display: none">Hello</p>
// jQuery
$('p').slideDown(5000);

.slideUp([duration] [, complete])

Use sliding special effects to hide elements.

// HTML
<p style="display: none">Hello</p>
// jQuery
// 隱藏後執行一個 callback function
$('p').slideUp(3000, function() {
    alert('隱藏完成')
});

Hello

.slideToggle([duration] [, complete])

Switch the display/hide status alternately.

Fading

Show/hide elements with a fade-in and fade-out effect.

.fadeIn() .fadeIn([duration] [, complete])

Display elements with a special effect of fading in.

// HTML
<p style="display: none">Hello</p>
// jQuery
$('p').fadeIn('slow');

.fadeOut([duration] [, complete])

Hide elements with fade-out special effects.

// HTML
<p style="display: none">Hello</p>
// jQuery
$('p').fadeOut(3000);

Hello

.fadeTo(duration, opacity [, complete])

Dynamic gradient adjustment of element transparency, and a function can be executed after switching. (Width and height remain unchanged)

opacity is the opacity value 0~1

HTML
<p style="display: none">Hello</p>
jQuery
$('p').fadeTo('slow', 0.33);

Set by yourself (Custom)

.animate(properties [, duration] [, easing] [, complete])

.animate() This function allows you to define dynamic effects yourself. Its parameters are:

parameter	Type	Description
properties	Object	A set of {property:value} containing the final CSS style
duration	String,Number	Three predetermined speeds (slow, normal, fast), or the number of milliseconds between animations (such as one second=1000)
easing	String	Mode of relaxation, the default is linear, and swing is optional
complete	Function	The function to be executed after each element completes the animation

// HTML
<p id="foo">Hello</p>
// jQuery
$('#foo').animate({ 
width: '70%',
opacity: 0.4,
marginLeft: '0.6in',
fontSize: '3em',
borderWidth: '10px'
}, 1500);

Hello

.animate() only supports "digitizable" attributes, such as height, width, left, top, opacity, etc.

Also you can specify the attribute value in front of +=or -=do relative movement.

$('#foo').animate({
  left: '+=100px'
}, 2000);