Is there a simple way to create a simple button hover fade without flicker?

I’ve been trying to figure out how to create a smooth button mouseover fade without the annoying flicker which looks like its caused by both states looping their animate in/out settings. I’m using a dynamic panel with 2 states and an OnMouseEnter action and an OnMouseOut action with wrapping and without wrapping to no avail. The only example i’ve seen work it out used a dynamic panel inside of which was a text label on top of another dynamic panel which contained the 2 color states, with each state having a condition with half the speed of the top level action. This seemed really cumbersome and other examples in the forum lead to the same flicker. Is there a simple way to do this that i’m completely overlooking? Thanks for any assistance.

Ended up setting opacity for state 1 to 50% and that seems to hide the flicker but still a duck-taped approach. Anyone have a better approach? thanks.

If you’re comfortable with it, you can do it with javascript injection: Opacity_Transition.rp (51.1 KB)

This should answer most of your questions about using javascript in Axure: http://dejongh.dk/wiki/doku.php?id=interaction:axure_javascript

Awesome! Thanks Huban! :+1:

This IS frustrating, I know. But you have to keep in mind what you are ‘hovering’ over—you are not hovering over an actual button, but a series of ‘states’ contained in a ‘Dynamic Panel’. Add the Mouse Interactions to the Dynamic Panel, rather than to the buttons inside.