6 Simple Jquery Examples for Beginners

After watching a series of jQuery for beginners screencasts this page has been put together for other beginners such as myself to explore the code behind these 6 common examples of jQuery effects!

Also visit jQuery Effects for more in-depth explanations.

Hover Image Opacity

Image Slide Effect

BOOM!

Place whatever you like in this section!

Thumbnail Hovers

Toggle Class

Click this paragraph to Toggle its class.

Toggle Class + CSS3

Click this paragraph to Toggle its class. This uses css3 code in the form of: -webkit-transition: all 0.2s ease

Slide Toggle Effect

Have some cupcake ipsum:

Cupcake ipsum dolor sit amet muffin applicake liquorice. Gingerbread jujubes oat cake pastry. Gummies gummies chocolate bar halvah powder sweet roll caramels topping. Caramels donut donut.

Fade Toggle Effect

Have some cupcake ipsum:

Cupcake ipsum dolor sit amet muffin applicake liquorice. Gingerbread jujubes oat cake pastry. Gummies gummies chocolate bar halvah powder sweet roll caramels topping. Caramels donut donut.

Placeholder Images obtained from Lorempixum.com

Compiled by Dan Netherton December 2011