Tag archive: jQuery

Fading in images sequentially in jQuery

This took me ages to figure out. I don’t know why. Anyway, I was creating a gallery of thumbnail images, and I wanted each image to fade in sequentially. The next image would start fading in before the previous one’s jQuery fadeIn had completed, so I couldn’t really use a callback.
Read more »

jQuery image hover effect

I’ve just been trying to replicate a certain effect I saw in Flash image gallery with jQuery. When you hover over a thumbnail, it “glows” a little—not an “outer glow”, but the whole image just becomes brighter for a moment then the brightness fades back.

A very simple effect, and in the end doing it in jQuery was pretty simple, but I thought I’d document it. My technique has one caveat: it relies on the background being white, because it basically achieves the effect by temporarily reducing the opacity of the thumbnail image. If you have a background colour different from the colour you want the image to “glow” with, I’m sure there’s a way. You could probably use positioning to put a blank white image behind the thumbnail, and use this technique as-is.

Read more »

jQuery hover drop-down menus and the setTimeout issue

You know those days when you kind of know there’s plugins and whatnot aplenty to do something? But you’re feeling stubborn, and you’d rather re-invent the wheel? Today has been like that.

It’s not just being stubborn, though. Sometimes you want to re-invent the wheel so you know how to make better wheels yourself. In coding, you have to strike a balance between getting stuff done quickly and efficiently by relying on what’s already been done, and actually progressing your own skills.

Anyway, today I solved something that had been bugging me for a while: creating slick drop-down menus. I know CSS-based drop-downs, and they’re a good thing. But having got into jQuery recently, I wanted to get them right with scripting.

Read more »

Complete archive

Main index