jQuery Effects Tutorial – jQuery Effects Reference, jQuery Effect Examples

Last Updated on: April 15, 2020   Posted By: Web Design Reference

jQuery Effects Tutorial: Learn jQuery Effect basic concept, Different Type of jQuery Effects, jQuery Effects Reference Guide, jQuery Effects Examples. In this page to learn the jQuery Effect definition, the Purpose of using jQuery Effects, and how to use jQuery Effects on a web page with examples. Follow and Like us on Facebook, Twitter, LinkedIn, Pinterest for the latest posts.


What are jQuery Effects and their uses?

jQuery Effects: It provides several techniques or methods for adding animation to a web page. Like Hide and show off an object on a web page. Some jQuery Effects are animate, fadeIn, fadeOut, hide, show, slideDown, slideUp, slideToggle, toggle, etc.

jQuery Effects Tutorial: Use of Hide Effect in an HTML Document
Example: jQuery Effect in a html Document
< html >
< head >
< title >
How to include jQuery in a Document
< /title >
< script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js” > < /script >
< script >
< /script >
< /head >
< body >
< div class=”div-box” > Click to hide me. < /div >
< /body >
< /html >
Different Types of jQuery Effects with Description
Effect/Method Description
fadeIn() Fade in the selected element
fadeIn() Fade out the selected element
fadeToggle() Toggle between FadwIn and FadeOut methods
fadeTo() FadesIn/FadeOut the selected elements to a given opacity
animate() To Create a custom animation on the selected element
hide() Hide the Selected Element
show() Show the Selected Element
slideDown() Slide Down the Selected Element
slideUp() Slide Up the Selected Element
slideToggle() Slide Toggle between SlideUp and SlideDown methods
toggle() Toggle between Hide and Show methods
stop() Stop the running animation on the selected element
queue() Show the queued methods on the selected element
finish() Finish all queued animations on the selected elements
dequeue() Removes the next method from the queue and then executes the method on the selected element
delay() Sets a delay for all queued methods on the selected elements
clearQueue() Clear all queued methods from the selected elements

Web Design Reference Guide Android App for Website Developers

Web Design Reference Guide Android App: Web Design Tutorial App is a tutorial and reference-based app. It provides Web Design Tutorial and Reference to Web Designers or Web Developers to grow their Web Development skills.


Also Related to this Page


Leave a Reply