Chief Alchemist - Business Consulting For The 21st Century Via A Holistic & Intelligent Approach
Share RSS 2.0 feed for Sign up for the mailing list. Follow Chief Alchemist on Twitter. 'Like' the Chief Alchemist's page on Facebook. See what Chief Alchemist has been Q&A'ing on Quora. Chief Alchemist bookmarks & highlights on Follow the Chief Alchemist on Chief Alchemist channel on Chief Alchemist on Flickr. Mark 'Chief Alchemist' Simchock on LinkedIn. Free Initial Consultation. Email Chief Alchemist. Phone Chief Alchemist.
  • Mark ‘Chief Alchemist’ Simchock
  • 'Email me.Email => ca .at. ChiefAlchemist .dot. com
  • 'Phone me.Alchemy United => 732 997-0028
  • Free initial consultation.Free => Initial Consultation
  • Please be sure to subscribe to your communication channels of choice.
  • Click To Close => The small green (consultation), red (email) or blue (phone) icons in the top upper right.
Business Consulting For The 21st Century Via A Holistic & Intelligent Approach

Build a better jQuery image hover

Consumed => “How to create an image hover-preview effect using jQuery” by Ryan Boudreaux on TechRepublic.

=> My value add (i.e., left a comment)…

I’m no jQuery expert but perhaps it would have been a bit more efficient to set up everything, or most of it, in the markup and then just use jQuery to .show() and .hide() or even animate(). Once you append() and remove() and then append() again, it’s “wasteful”, yes?

Also, is there a reason you elected to use a link instead using a data attribute within the img? Hover or even .click for that matter will work on images just as easily as links, correct?

Don’t get me wrong, I understand there’s more than one way to skin the jQuery cat. That said, as someone who is trying to learn the library, I often lose sleep wondering, “Yes, it works. But did I do it as thoroughly as possible?” Working examples are easy to find but optimized ones not so much so. Perhaps this is something you can visit in future tuts? Thanks.

Will not be published. Required.
Please include http://