jQuery for Designers

Here are 10 visual exmples to demonstrate on how to use jQuery to enchance user experience and semantic web design (view original jQuery Tutorials).

Another awesome tutorial by Web Designer Wall.

1. Simple Slide Panel

2. Simple Disappear

3. Chainable Effects

4a. Accordion 1

4b. Accordion 2

This one lets you specify which panel to open as default.

5a. Animated Hover 1

5b. Animated Hover 2

This will get the title attribute and append it to the hover text.

6. Entire Block Clickable

This will make entire block element clickable (see live demo on Best Web Gallery).

7. Collapsible Panels

This example shows you how to imitate the Gmail inbox panels.

8. Imitate the WordPress Comment Management

This one requires the Color Animations plugin.

9. Image Replacement Gallery

Replace the img src attribute with the a href attribute.

10. Link Type Styling