PDA

View Full Version : Hover Effect



mmusson
16 Sep 2009, 9:12 PM
I ran across a blog post (http://www.adrianpelletier.com/2009/05/31/create-a-realistic-hover-effect-with-jquery-ui/) showing how to create a nice hover effect with jQuery. View the demo (http://adrianpelletier.com/sandbox/jquery_hover_nav/) to see the effect in action.

I decided to port the code to Ext JS. The resulting code is surprisingly similar to the original jQuery version. For example:



// Original jQuery code:
// $("#nav-reflection a").hover(function () {
// $(this).stop().animate({ marginTop : "-10px" }, 200);
// $(this).parent().find("span").stop().animate({ marginTop : "18px", opacity : 0.25 }, 200);
// }, function () {
// $(this).stop().animate({ marginTop : "0px" }, 300);
// $(this).parent().find("span").stop().animate({ marginTop : "1px", opacity : 1 }, 300);
// });

Ext.select('#nav-reflection a').hover(function () {
Ext.fly(this).stopFx().animate({ marginTop : { to : -10 }}, 0.2);
Ext.fly(this).next().stopFx().animate({ marginTop : { to : 18 }, opacity : { to : 0.25 }}, 0.2);
}, function () {
Ext.fly(this).stopFx().animate({ marginTop : { to : 0 }}, 0.3);
Ext.fly(this).next().stopFx().animate({ marginTop : { to : 1 }, opacity : { to : 1 }}, 0.3);
});


After uncompressing the files, you need to edit the html page and provide the correct paths to the ext scripts and css. I left the original jQuery code commented out in the script file because I thought the similarity was interesting to see.

Mike

mitchellsimoens
17 Sep 2009, 8:40 AM
Nice port! worked in ExtJS 2.3 and also 3.0