CSS – Create a Loading Spinner
Using pure CSS animation you can create a loading spinner for your site.
CSS – Expand a Search Field When in Use
To give a site an interesting and modern feel, the transition property can be used to expand the length of the search field when the user clicks into it.
CSS – Fading in a Page or Element on Load
Fading in a page on load can give site items like a sidebar or icon boxes that load slowly the time to finalize their size/color without the user noticing.
jQuery – Creating Effects or Animations
jQuery can be used to hide, show, fade in/out, or slide up/down HTML elements on the page, creating effects and animations with a great deal of control.
jQuery – Using Callback Functions
Callback functions are used to run several lines of code containing effects that need to finish running individually before running the next line of code.
jQuery – :animated Selector
The :animated selector selects all HTML elements that are currently animated.
jQuery – animate() Method
The animate() method performs a custom animation on an HTML element, changing one CSS property value to another gradually, creating an animated effect.
jQuery – fadeIn() Method
The fadeIn() method gradually changes, fades in, the opacity for the selected element from completely hidden to completely visible.
jQuery – fadeOut() Method
The fadeOut() method gradually changes, fades out, the opacity for the selected element from completely visible to completely hidden.
jQuery – fadeTo() Method
The fadeTo() method gradually changes the opacity for the selected element to a specified opacity, fading in or fading out the element.
jQuery – fadeToggle() Method
The fadeToggle() method toggles between the fadeIn() and fadeOut() methods by fading in a faded-out element and fading out a faded-in element.
jQuery – finish() Method
The finish() method stops the currently-running animations, removes all queued animations, and completes all animations for the selected element.
jQuery – jQuery.fx.interval Property
The jQuery.fx.interval property is used to change the animation firing rate in milliseconds.
jQuery – jQuery.fx.off Property
The jQuery.fx.off property is used to globally disable/enable all animations, which will immediately set elements to the final state of the animation.
jQuery – slideDown() Method
The slideDown() method slides down and shows the selected element. It works on elements hidden with jQuery methods and those with display: none in CSS.
jQuery – slideToggle() Method
The slideToggle() method toggles between the slideUp() and slideDown() methods by sliding down a hidden element and sliding up a visible element.
jQuery – slideUp() Method
The slideUp() method slides up and hides the selected element. The hidden item will no longer take up space on the page, affecting the layout.
jQuery – stop() Method
The stop() method stops the currently running animation for the selected element.
jQuery – List of Effect Methods
This is a quick reference list of jQuery effect methods for creating animation effects for the selected elements.
jQuery – Smooth Scroll to a Page Anchor
Using the jQuery animate() method, a link clicked can smoothly scroll down (or up) the page to a page anchor.