jQuery Effects

Effects

jQuery effects includes transitions and movements

• show and hide elements
• animate elements with fade in and fade out
• animate elements with slide up and slide down

	jQuery method	method meaning
Basic Effects	$('selector').show()	set the display CSS property to element's default value
	$('selector').hide()	set the display CSS property to none
	$('selector').toggle()	toggle between showing and hiding elements
Fading Effects	$('selector').fadeOut()	make element disappear by changing both opacity and display CSS properties
	$('selector').fadeIn()	make element appear by changing both opacity and display CSS properties
	$('selector').fadeTo()	change the opacity CSS property
	$('selector').fadeToggle()	hide or show the element
Sliding Effects	$('selector').slideUp()	hide the element with sliding movement
	$('selector').slideDown()	show the element with sliding movement
	$('selector').slideToggle()	hide or show the element
Custom Effects	$('selector').delay()	delay the execution of the following method
	$('selector').stop()	stop the animation
	$('selector').animate()	create a custom animation

Example: effects with hide(), slideDown(), fadeIn() and fadeOut()

See the Pen jQuery effects by Massimiliano (@maxdesimone) on CodePen.

Custom Effects

You can create custom effects by animating CSS properties.

• jQuery CSS animation work in every browser, pure CSS3 animation are faster than jQuery counterparts but only work in recent browsers.
• you can animate any CSS property whose value is numerical

$('selector').animate({
  prop-name1:prop-value1,
  prop-name2:prop-value2,
  prop-name3:prop-value3
} [,speed] [,easing] [,callback]);

The .animate() method has one mandatory parameters and three optional ones.

• an object literal with the CSS properties you want to change
• speed is the duration of the animation in milliseconds
• easing has two values: linear or swing
• callback is a function that is to run when the animation is complete

In the literal object the name of the CSS properties have to be written using the camel case notation: for example padding-top becomes paddingTop, etc.