Question

I am trying to use the jquery-ui toggleClass (with a duration) to add a class with a color to an element which has already had its color set explicitly in CSS.

Unless I tag the color in the class I am toggling to as “!important”, this color doesn’t stick once the transition is completed. If I DO set it as “!important”, the color fades in one direction as expected, but doesn’t return smoothly in the other.

One solution I had implemented previously as a work-around was to assume a 2-color scenario, and just use jquery’s animate to manually set the color on the hover event instead of using toggleClass. However, I am now trying to use this in a situation in which the starting color of the element is not known prior to applying this effect.

Any ideas as to how to achieve a smooth transition in both directions would be greatly appreciated.

See this jsfiddle: http://jsfiddle.net/BM6NT/

Answer 1

this will fix it http://jsfiddle.net/BM6NT/7/

a.fancy, div.fancy {
    margin-left:5px;
    color:orange;
}