- 1. jParallax Plugin
- 2. FxQueues Plugin
- 3. jsAnim – Free JavaScript Animation Library
- 4. $fx
- 5. GX
- 6. Glimmer
- 7. Magic
- 8. Simulate Gravity with jQuery
- 9. Building an Animated Cartoon Tobot
- 10. Flashy Intro with jQuery Animation
- 11. How to Make an Impressive Animated Landscape Header with jQuery
- 12. Animated Sharing Bar With jQuery & CSS
- 13. jQuery Tutorials for Designers
- 14. LavaLamp for jQuery lovers!
- 15. jQuery Hover Sub Tag Cloud
- 16. How to Load In and Animate Content with jQuery
- 17. Adding to Our Leopard Desktop with jQuery
- 18. liScroll (a jQuery News Ticker made easy)
- 19. Sliding menu using jQuery
- 20. Sexy Drop Down Menu w/ jQuery & CSS
- Frequently Asked Questions about jQuery Plugins
1. jParallax Plugin
jParallax, turns a selected element into a ‘window’, or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions.![jParallax-Plugin-.jpg](https://uploads.sitepoint.com/wp-content/uploads/jquery4u/2011/04/jParallax-Plugin-.jpg)
2. FxQueues Plugin
This plugin was based on a script John Resig sometime ago. Scope stuff, new example page and some unit tests has been added. Needs improvement, but is a good start.![FxQueues-Plugin-.jpg](https://uploads.sitepoint.com/wp-content/uploads/jquery4u/2011/04/FxQueues-Plugin-.jpg)
3. jsAnim – Free JavaScript Animation Library
Powerful, yet easy to use library for adding impressive animations to websites, without sacrificing standards or accessibility.![jsAnim-Free-JavaScript-Animation-Library-.jpg](https://uploads.sitepoint.com/wp-content/uploads/jquery4u/2011/04/jsAnim-Free-JavaScript-Animation-Library-.jpg)
4. $fx
A compact, lightweight Javascript Library for animation. CSS properties adjustment along a time line. Parallel effect sets and effect chains. Extended set of callbacks to adjust behavior.![fx.jpg](https://uploads.sitepoint.com/wp-content/uploads/jquery4u/2011/04/fx.jpg)
5. GX
Full-featured, cross-browser, super-tiny (10kb uncompressed) Javascript Animations Framework. Using GX you can create complex animations working with every w3c CSS property.![GX.jpg](https://uploads.sitepoint.com/wp-content/uploads/jquery4u/2011/04/GX.jpg)
6. Glimmer
jQuery’s support for animations is amazing. Glimmer makes it easy to create standards-based, custom animations that can work directly with your existing HTML and CSS.![glimmer.jpg](https://uploads.sitepoint.com/wp-content/uploads/jquery4u/2011/04/glimmer.jpg)
7. Magic
A simple JavaScript framework.![Magic.jpg](https://uploads.sitepoint.com/wp-content/uploads/jquery4u/2011/04/Magic.jpg)
8. Simulate Gravity with jQuery
Visual effects on web pages are becoming more and more effective thanks to framework like jQuery. The idea of being able to adjust the look of a page with a click or a button gives the user a bit of extra interaction.![Simulate-Gravity-with-jQuery-.jpg](https://uploads.sitepoint.com/wp-content/uploads/jquery4u/2011/04/Simulate-Gravity-with-jQuery-.jpg)
9. Building an Animated Cartoon Tobot
Useful as a miniature ship in a bottle. Yet it does have an underlying purpose. It could inspire someone to look beyond the perceived constraints of web designers and developers.![Building-an-Animated-Cartoon-Tobot-.jpg](https://uploads.sitepoint.com/wp-content/uploads/jquery4u/2011/04/Building-an-Animated-Cartoon-Tobot-.jpg)
10. Flashy Intro with jQuery Animation
Before, almost every website has a Flash intro or header that makes you wait in… forever. Now more and more people are using jQuery’s animation function to make their sites interesting.![Flashy-Intro-with-jQuery-Animation-.jpg](https://uploads.sitepoint.com/wp-content/uploads/jquery4u/2011/04/Flashy-Intro-with-jQuery-Animation-.jpg)
11. How to Make an Impressive Animated Landscape Header with jQuery
In this tutorial we’ll start with a cartoon themed header, build two different states for content and animate a transition between them using jQuery.![How-to-Make-an-Impressive-Animated-Landscape-Header-with-jQuery-.jpg](https://uploads.sitepoint.com/wp-content/uploads/jquery4u/2011/04/How-to-Make-an-Impressive-Animated-Landscape-Header-with-jQuery-.jpg)
12. Animated Sharing Bar With jQuery & CSS
Fed with the old share buttons and its performance and appearance? This tutorial is the one you wouldn’t want to miss.![Animated-Sharing-Bar-With-jQuery-CSS-.jpg](https://uploads.sitepoint.com/wp-content/uploads/jquery4u/2011/04/Animated-Sharing-Bar-With-jQuery-CSS-.jpg)
13. jQuery Tutorials for Designers
Contains 10 visual tutorials intended for web designers and newbie on how to apply Javascript effects with jQuery. In case you don’t know about jQuery, it is a “write less, do more” JavaScript library.![jQuery-Tutorials-for-Designers-.jpg](https://uploads.sitepoint.com/wp-content/uploads/jquery4u/2011/04/jQuery-Tutorials-for-Designers-.jpg)
14. LavaLamp for jQuery lovers!
Flash menu bar to attract your visitors is not enough when talking about flash players. Try this tutorial that make some navigational bar animation when you rolls your mouse over the menu.![LavaLamp-for-jQuery-lovers-.jpg](https://uploads.sitepoint.com/wp-content/uploads/jquery4u/2011/04/LavaLamp-for-jQuery-lovers-.jpg)
15. jQuery Hover Sub Tag Cloud
Old wordpress plugins that shows the tag clouds of your articles so boring nowadays. It’s time for you to make your own tag cloud. Try this tutorial.![jQuery-Hover-Sub-Tag-Cloud-.jpg](https://uploads.sitepoint.com/wp-content/uploads/jquery4u/2011/04/jQuery-Hover-Sub-Tag-Cloud-.jpg)
16. How to Load In and Animate Content with jQuery
In this tutorial you will learn how to make your average everyday Website and enhancing it with jQuery. Learn adding Ajax functionality so that the content loads into the relevant container instead of the user having to navigate to another page.![How-to-Load-In-and-Animate-Content-with-jQuery-.jpg](https://uploads.sitepoint.com/wp-content/uploads/jquery4u/2011/04/How-to-Load-In-and-Animate-Content-with-jQuery-.jpg)
17. Adding to Our Leopard Desktop with jQuery
Learn Leopard Desktop without showing it to your webpage. Try this tutorial and make your visitors to feel something different when they visit your webpage.![Adding-to-Our-Leopard-Desktop-with-jQuery-.jpg](https://uploads.sitepoint.com/wp-content/uploads/jquery4u/2011/04/Adding-to-Our-Leopard-Desktop-with-jQuery-.jpg)
18. liScroll (a jQuery News Ticker made easy)
Just Look at this simple tutorial for making a simple scroll bar for your Webpage. Since it’s a simple tutorial, you can definitely learn the basic things of jQuery.![liScroll-a-jQuery-News-Ticker-made-easy-.jpg](https://uploads.sitepoint.com/wp-content/uploads/jquery4u/2011/04/liScroll-a-jQuery-News-Ticker-made-easy-.jpg)
19. Sliding menu using jQuery
Bored with plain menu bar? Then you should take a look at this tutorial. This will help you to create a Sliding menu bar using our jQuery.![Sliding-menu-using-jQuery.jpg](https://uploads.sitepoint.com/wp-content/uploads/jquery4u/2011/04/Sliding-menu-using-jQuery.jpg)
20. Sexy Drop Down Menu w/ jQuery & CSS
If you want to get your visitor interested in your webpage make some attractions. Make a navigation menu that is organized and well-structured.![Sexy-Drop-Down-Menu-with-jQuery-CSS-.jpg](https://uploads.sitepoint.com/wp-content/uploads/jquery4u/2011/04/Sexy-Drop-Down-Menu-with-jQuery-CSS-.jpg)
Frequently Asked Questions about jQuery Plugins
What are jQuery plugins and why are they important?
jQuery plugins are pieces of code that are developed to extend the functionality of jQuery, a fast, small, and feature-rich JavaScript library. These plugins are important because they allow developers to add more features to their websites or applications without having to write the code from scratch. They can help in creating dynamic web pages, animations, form validation, and much more.
How do I install a jQuery plugin?
To install a jQuery plugin, you first need to download the plugin file, which is usually in .js format. Then, you include this file in your HTML document using the script tag, after including the jQuery library. The order is important because the plugin needs to access the jQuery library to work properly.
How do I make an element flash in jQuery?
To make an element flash in jQuery, you can use the .animate() method. This method allows you to create custom animations on CSS properties. You can adjust the opacity of the element to create a flashing effect.
What is the FxQueues plugin and how does it work?
The FxQueues plugin is a jQuery plugin that allows you to manage and control the execution of animations. It works by adding animations to a queue and executing them one by one. This can be useful when you want to create complex animations with precise timing.
How does the Fx queue in jQuery auto-start?
The Fx queue in jQuery auto-starts by default. This means that when you add an animation to the queue, it will automatically start playing. If you want to prevent this behavior, you can use the .queue() method to manually control the start of the animations.
How can I use the .animate() method in jQuery?
The .animate() method in jQuery is used to create custom animations. You can animate any CSS property by passing it as a parameter to the .animate() method. You can also specify the duration of the animation, the easing function, and a callback function to be executed when the animation is complete.
Can I use jQuery plugins with other JavaScript libraries?
Yes, you can use jQuery plugins with other JavaScript libraries. However, you need to be careful about conflicts between the libraries. jQuery provides a noConflict() method that allows you to avoid conflicts with other libraries.
How can I create my own jQuery plugin?
Creating your own jQuery plugin involves writing a function that adds new functionality to jQuery’s prototype object. This function can then be called on any jQuery object. You can encapsulate your code within a function to avoid conflicts with other plugins and to keep your code organized.
Are there any alternatives to jQuery plugins?
Yes, there are many alternatives to jQuery plugins. These include pure JavaScript solutions, as well as plugins for other libraries such as React, Angular, and Vue.js. The choice of plugin depends on your specific needs and the technologies you are using.
How can I troubleshoot issues with jQuery plugins?
Troubleshooting issues with jQuery plugins can involve several steps. First, check if the plugin is correctly installed and included in your HTML document. Then, check if there are any errors in the browser’s console. You can also use the debugger tool in your browser to step through the code and find the source of the problem.
![Sam Deering](https://uploads.sitepoint.com/wp-content/uploads/2018/10/1539663963Sam-Deering-150x150.jpg)
Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.