Wednesday, July 13, 2016

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.

No comments :

Post a Comment