[ Tag Archive ]

Using jQuery for a Simple Animated Fade Effect

Posted on March 15, 2010  |  Category: Tutorials

I know I have already done a fade effect between two images with jQuery, but here is a quick little piece of code that will just add a nice animated fade effect to single images. Whenever a person hovers over an image, we will use jQuery to lower the opacity to make it appear lighter. Easy and not that impressive but still pretty cool.

Read More »

Using jQuery to make an Expandable Code Box for WP-Syntax

Posted on November 2, 2009  |  Category: Tutorials

You may have noticed that I’m using a new syntax highlighter for my code snippets. I installed Ryan McGeary’s WordPress plugin WP-Syntax which uses GeSHi (Generic Syntax Highlighter), a simple highlighting class that supports multiple coding languages. It’s great but I’m not a fan of the horizontal scrollbar that appears if code extends past your site’s width. Instead, I decided to use jQuery to expand the box when you hover over it.

Read More »

Creating a Mouseover Fade Effect with jQuery

Posted on August 5, 2009  |  Category: Tutorials

My last little jQuery tutorial was an alternative to using CSS to create an image change on a mouseover. Now I want to take that one step further and add a fade effect. For my example, I am going to make a black and white image fade into a color image. To achieve this effect I am going to introduce the animate function. There are tons of possibilities in regards to jQuery’s animate function, but for this tutorial, I’m going to keep it simple by just using it to do one thing.

Read More »