Some input regarding Dojo (smooth css change on mouseover)

Question

I've been playing around with Dojo over the last couple of days.

The script below changes the background position of the list item when the mouse is over the link.

dojo.query('a[class=main-menu-link]').forEach(function(linkTwo) {

dojo.connect(linkTwo, "onmouseover", function(evt) {

dojo.query('#main-menu ul li').forEach(function(linkThree) {


dojo.style(linkThree, {

"backgroundPosition": "right center",

});

});

You can see it in action in the right hand side menu: http://www.mechanic-one.suburban-glory.com/

I'm trying to work out the best of way of giving it a smooth transition between the two states... I've been looking on the Dojo documentation page but I'm not sure what is the best way of approaching it.

Answer 1

Check out the Animation quickstart. You can animate css properties and select from a set of existing animation effects and easings. Chaining is possible by requiring the NodeList-fx module.