Direction Aware Hover with jQuery, cross-browser compatible
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:
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.