featured

15 Cool jQuery Effects to Enhance User Experience

Companies wrestling for businesses on the web prefer having appealing websites with rich user interfaces and stunning visual effects. jQuery has simplified the task of presenting dynamic content along with the visual effects. With jQuery, you can rapidly create advance, feature-rich websites. Now, you can develop standardized, highly responsive web pages using Ajax, create user-friendly forms, and add jQuery to enhance usability and user experience of the visitors.

There was a time, when we were just able to categorize images in tables, which were displayed in a new window or pop up with the user’s click; it is over now. Today, with amazing effects created by jQuery, it is easy to showcase image galleries in many attractive styles. jQuery effects give excellent usability experience to the users. Browsing and viewing contents and image galleries have went through a long journey in their development area. Today, a slew of superb jQuery Plugins is available to create amazing effects, which you would really love to have on your site.

Today we’ll dig into them a little bit, and see what you can use right now to enhance user experience in your website.

super-creative-menu-top

5 Super-Creative “jQuery” Navigation Menus

Hey everyone, anyone had an experience where something just looks so beautiful that you can’t take yours eyes off it? Even take peeks once in a while at it? Maybe the hot girl on the other side of the room! Haha got some of you guys there! :) Forget that! How about having this experience on a website!

featured

Rocking Collapsible Panels jQuery Plugin

Have you ever seen wikipedia’s mobile version? Or ever heard about <details> HTML element? Well, basically, these examples are good implementations of “collapsible panels” that allows users to see just what they need to see. And they are specially good for mobile devices with those small screens.

The downside of them is that they need additional markup to work. You know, it works fine when you are the only one who updates content, but won’t work at all when you are dealing with CMS or user (client) generated content.

Here we’ll see the whole process of planning, coding, testing and correcting a Rocking jQuery Plugin for Collapsible Panels. Hope you enjoy it!

j_menu-plugin

Javascript Accordion Menu

Javascript Accordion Menu is an image based site navigation menu. Scriptocean Accordion Menu Wizard supports horizontal and vertical accordion menus.

Features :
Title and description text for each image.
Define a link for each image.
You can set transparency of the text area.
Autoplay.

Author: scriptocean.com
jQuery Version: 1.5 +
Official Page
Learn how to do it!
DemoDownload this one!
jqy_acc_menu

jQuery “State-Saving” Accordion Menu

What I found here was jQuery’s accordion menu plugin that this menu uses. This one is tweaked (of course) to make each section house the page copy and be bookmarked and re-accessed without having to re-click on that section.

You have a nice working jQuery accordion menu with some simple jQuery code to make sections bookmarkable and let us point users to a specific section.

Author: Michael Jacob Davis
jQuery Version: 1.2 +
Official Page
Learn how to do it!
DemoDownload this one!
slideout-drawereffect-menu-jquery-plugin

jQuery “Slide out and drawer effect” Menu

The effect is commonly known as an ‘accordion’ and it’s usually used to slide up, or down blocks of content to expose new blocks. This is the definition on this plugin’s tutorial page I found and you will see.

This tutorial will walk you through on how to create your own simple plugin, and then replicate the Apple downloads drawers using the very excellent Accordion plugin.

 

Author: John Resig
jQuery Version: 1.2 +
Official Page
Learn how to do it!
DemoDownload this one!
acc-menu-mad-jquery-plugin

jQuery “Mad” Accordion Menu

On this plugin or menu, If we click on one of the headings, the following <div> will slide down. If we click on the same heading again, that <div> will slide back up.

Clicking on on any heading will also hide all of the other <div>s —this is what the sliding is all about with this menu. If your still interested in this one, the plugin tutorial also has a neat toggle effect that you can read towards the end of the tutorial.

Author: Karl Swedberg
jQuery Version: 1.1 +
Official Page
Learn how to do it!
DemoDownload this one!
light_accordion_menu-jquery-plugin

“Lightweight” Accordion Menu

The updated accordion script is powerful and lightweight at only 1.2kb. It now includes multi-level support, the option to allow multiple panels to expand concurrently, and a hide/show all toggle. Check back the plugin’s site for more posts and scripts.

Author: Michael Leigeber
Official Page
Learn how to do it!
DemoDownload this one!
acc-menu-hover-jquery-plugin

jQuery “Accordion-Style” Hover Menu

Like many other accordion-style, this menu can be very great with vast amounts of information. Other ways to make it more interesting is make the important headers more visible to the user if you want those ones to be viewed more times.

You can also make the animation happen, when just the user hovers over the tabs or headers. Which is exactly what this plugins does for your situation.

Author: Bernd Matzner
Version: 0.9
jQuery Version: 1.4 +
Official Page
Learn how to do it!
DemoDownload this one!
Xbox-style-menu-jquery-plugin

jQuery “XBOX 360″ Style Menu

Yet another plugin that is a menu. I have to tell that menus never make me tired of them. Especially ones that are stylish like this one. The gamer programmers will defineitly check this one out.

This plugin as I see has been updated many times making it very reliable on many different levels. If your website is gaming oriented, I have nothing else to say!

This is directly from the website itself.

“No dependencies”
“Optional use if easing plugin”
“Close and open content one after the other”
“Close and open at the same time”
“Choose trigger (mouseover, click …)”
“Easily control through external calls”
“Open content on load”
“Open content through hash tags in the url (#tab1, #tab2…)”
“Position of handle (left, right)”
“Mixed handle positions – 2 left , 2 right …”
“Cycle through content by interval”
“Events when animations starts and ends”
“Hide content until all has been assembled”


Author: Alexander Gräf
Version: 2.0 Beta
jQuery Version: 1.3 +
Official Page
Learn how to do it!
Download this one!