1. jQuery Lavalamp Menu – It is the jQuery plugin that is based of Guillermo Rauch plugins for mootools and Ganesh Mawwaha’s jQuery 1.1.x plugins. Through the Sliding Doors CSS/Javascript method, you are able to add a background hover effect on HTML link lists with Lavalamp by utilizing the Eazing library.

2. Superfish Menus – Suckerfish on ‘roids, This jQuery plugin allows the development of improved Suckerfish style of dropdown menus from the existing pure CSS type of dropdown menu. The features that are added as a result of these include: a timed-delay on mouseout, automatic utilization of hoverIntent plugin when present; obligatory IE6 –hover capability; animated sub-menu; accessibility through keyboard tab key; generation of arrows to indicate the submenus; use of drop shadows for browsers that are capable; and many others.

3. jQuery Context Menu – This jQuery plugin provides easy implementation, CSS styling, keyboard shortcuts and control methods.

4. Kwicks for jQuery – This highly versatile and customizable widget had started as just a port for Mootools framework.

5. jQuery iPod-style Drilldown Menu – jQuery has an iPod-style drilldown menu that helps users traverse hierarchical data with relative ease and control. This feature is very useful in organizing large data structures that don’t translate well into the traditional fly-out or dropdown menus.

6. jQuery File Tree – This jQuery plugin is a configurable AJAX file-browser plugin where you use to create a fully interactive and customized file tree as little as one of the Javascript code.

7. Recreate Mootools Home Page-Inspired Navigation Effect – Users of jQuery can recreate the same effects that you see in a Mootools.

8. CSS Sprites2 using jQuery – One can use jQuery to implement CSS Sprites2. One distinct advantage of jQuery over the other javascript libraries is that it allows users to select elements on a pages using CSS-like syntax that we are already familiar with.

9. jQuery Accordion – It is the jQuery plugin that allows the creation of the accordion menu. It can be used for nested lists, nested divs and definition lists. This plugin has options for structure specification, active element, when necessary, and animation customization. Read more…
• jQuery Tutorials and examples
• Top 100 jQuery Examples
• Jquery Examples
• CSS3 and jQuery Examples
• 25 jQuery Images Plugins Samples
• Best jQuery Tutorials and examples
• 500 Popular jQuery Examples
• How jQuery Works
• 100 jQuery live samples
• What is jQuery?

 

The largest collection of jQuery examples and jQuery Tutorials on the web. Learn and master jQuery from scratch. jQuery is nice piece of code that provides very good support for ajax. jQuery can be used to develop highly interactive webapplications. In this jQuery tutorials series we will show you how to use jQuery to develop nice ajax based applications.

You will learn how to download install and then start working with jQuery. We have also provided the demo of jQuery application. You can visit our jQuery demo section to view the running jQuery example.

Learn jQuery and master it in no time.

1. Introduction to jQuery
   jQuery is great library for developing ajax based application. jQuery is great library for the JavaScript programmers, which simplifies the development of web 2.0 applications.
2. Downloading and installing jQuery
   In this section we will download and install jQuery for developing our demo application. jQuery comes as single js file. Read more…
   • 100 jQuery live samples
   • jQuery Tutorials and examples
   • Jquery Examples
   • jQuery Navigation Examples
   • 500 Popular jQuery Examples
   • How jQuery Works
   • 100 Best of jQuery Tutorials and Examples
   • What is jQuery?
   • 100 jQuery Tutorials and Examples
   • Jquery Examples

    

jQuery - it’s a popular, high-performance and compact JavaScript library/framework. jQuery will allow  you to reduce the amount of code you have to write for dealing with browser quirks, memory leaks, and repetitive code by providing you with a set of useful and highly-optimized and thoroughly-tested functions and methods.

100 Useful jQuery Techniques

Modal Windows

1. How to create a stunning and smooth popup using jQuery

In this jQuery tutorial, you’ll discover a technique for creating a slick modal window that appears when the user clicks on the triggering element (in this case, form submit input, but you can easily modify it into other HTML elements like <a>). The tutorial will also show you how you can deal with keypress events so that you can incorporate keyboard shortcuts into your interface.

Live Demo

2. Simple jQuery Modal Window Tutorial

This modal window tutorial uses a rel attribute to indicate whether a link opens a modal window using inline content. You’ll witness a few popular jQuery methods in action like the .click() and .css() methods.

Live Demo

3. Building modal panels with jQuery

This jQuery tutorial discusses a method for creating a modal window that builds in graceful degradation in its design for users who don’t have JavaScript turned on.

Live Demo

Tool Tips

4. Build a Better Tooltip with jQuery Awesomeness

This tutorial will show you a method for replacing the built-in browser tooltips that appear on elements such as images and links with title attributes.

Live Demo

5. Smart Tooltips with jQuery

This tooltip technique will check whether a link has a title attribute or not, and if it doesn’t, it skips it title.

Live Demo

6. Coda Popup Bubbles

This excellent jQuery tutorial shows you how to create slick popup bubbles that appear when hovering over the target object.

Live Demo

Module Tabs

7. Create a Slide Tabbed Box using jQuery

This simple tutorial will show you how to create a set a module tab interface that slides content left and right as you click on the tabs.

Live Demo

8. Create a Tabbed Interface Using jQuery

This very detailed step-by-step tutorial will show you how to create a tabbed interface using jQuery.

Live Demo

9. jQuery Tabbed Interface

This excellent tutorial is yet another variation to the popular tabbed interface.

Live Demo

10. jQuery Tabs

This tutorial is in screencast format and is aimed at beginners and designers.

Live Demo

Showcasing Images

11. Create Sliding Image Caption with jQuery

This image gallery tutorial shows you an interesting interaction technique for having captions that slide up to reveal more information about a particular image when the user hovers over it.

Live Demo

12. Image Cross Fade Transition

This tutorial will show you how to fade another image in, superimposing onto the current image when the user hovers it. It can be a great way to display more information about a particular image.

Live Demo

13. A Basic Image Gallery - The jQuery Way

Create a basic image gallery by leveraging the strengths of jQuery in traversing the DOM and in DOM manipulation.

Live Demo

14. Image Reveal using jQuery

This quick and easy tutorial shows you the concept of hiding and showing elements by watching out for window events (in this instance - mouse hovers).

Live Demo

15. Inline Image Enlargement with jQuery

This jQuery tutorial shows you a slick and animated method for enlarging thumbnail-sized photos when the user hovers on them.

Live Demo

16. Slider Gallery

In this jQuery tutorial, you’ll learn how to create a sliding gallery that leans on jQuery UI to make dealing with theming the web component a breeze.

Live Demo

17. Simple jQuery Image Slide Show with Semi-Transparent Caption

In this tutorial, you’ll learn about the concept of tweaking opacity of elements, as well as using the setInterval function to delay the firing off of another function.

Live Demo

18. BBC Radio 1 Zoom Tabs

This screencast tutorial shows you how to zoom in and out of an image and reveal a module tab interface when the user hovers of it. The tutorial was inspired the BBC Radio 1 site which shows a similar effect.

Live Demo

19. Photo Slider Tutorial

This tutorial shows you how easy it is to implement the Photo Slider JS library to create a stunning but user-friendly sliding photo gallery.

Live Demo

Interacting with Content / Displaying Content

20. Creating a “Filterable” Portfolio with jQuery

In this jQuery tutorial, you’ll discover a method for creating a gallery of images that can be filtered by categories.

Live Demo

21. How to Build a Super Duper News Scroller

This screencast-format tutorial will show you how you can create a news scroller to display dynamic news feed connected to an RSS feed. This tutorial also uses PHP andSimplePie to interface with RSS feeds.

22. Text Resizing With jQuery

Resizing text on a web page is often a valuable site feature to help adjust the text within the web page instead of using the browsers’ features. This tutorial goes over a method for being able to resize text with jQuery that will work regardless of what font size units you use (i.e. px, em, %).

Live Demo

23. jQuery Sequential List

This tutorial leverages DOM manipulation to create a jQuery script that will replace your unordered (<ul>) and ordered (<ol>) lists into something fancier. The script you’ll learn to write in this tutorial gracefully degrades in the JavaScript off scenario.

Live Demo Read more…

• Best jQuery Tutorials and examples
• jQuery Tutorials and examples
• Jquery Examples
• jQuery Navigation Examples
• How jQuery Works
• 100 Best of jQuery Tutorials and Examples
• What is jQuery?
• 100 jQuery Tutorials and Examples
• Jquery Examples
• What is jQuery?