Direction Aware Hover with jQuery, cross-browser compatible

Wow, I’m impressed by Mary Lou. She creates the coolest little css and javascript effects on tympanus.net. For instance she made a cool direction aware hover jquery plugin that works with css3. In this article I wanted to share my code that makes her code work on all browsers. All credits go to her. Check out the demo and her tutorial:

Demo | Tutorial

She’s created the effect with css3 transition effect. This might be good for educational purposes, but with less lines of code we can create the same effect with only jQuery and have it work on all major browsers. You can download my adjusted version here:

Download the jQuery direction aware hover plugin

Installing the plugin

Installing the plugin is not much different from Mary Lou’s version. The big difference is that you can leave out the css3 classes: .da-thumbs li a div.da-animate, .da-slideFromTop , .da-slideFromBottom , .da-slideFromLeft , .da-slideFromRight , .da-slideTop , .da-slideLeft . We don’t need them, the jQuery animate() function is doing this work. If you want to have it work an all the ancient browsers (read ie6 -ie9, yes ie9 is ancient), you have to change the rgb values to hexidecimal colors and set an opacity and alpha filters(for old ie) for the elements.

What did I change?

Hardly anything. There was one function called _classes in the plugin that was deciding which class to add: .da-slideFromLeft, .da-slideFromTop etc., based on the direction the mouse was coming from. All I did was change the function into defining top and left css values instead. Then in the core part of the plugin instead of adding the propper classes I used the almighty jQuery animation function.