I have a rails view with this html:
<body onload='<%= visual_effect(:appear, :main_counter, :duration=>3.0) %>'>
<div class="counter" id="main_counter">some content</div>
</body>
and a stylesheet:
.counter{
opacity:0;
}
The effect works as expected but when its done the div's text disappears, I am guessing the opacity is going back to 0. How can I make it stay with full opacity?
The problem is that the appear effect removes the the opacity style from the element once it's done. the easiest solution is to remove the opacity: 0; from the stylesheet and put it directly on the div with style="opacity: 0". This is a little bit ugly, because of the inline style. Antoher solution would be to use the :from option in the visual_effect call like this:
visual_effect(:appear, :main_counter, :duration=>3.0, :from => 0)
This way the effect would first set the opacity to 0. However, if your pages takes a while to load, it could be that the div is visible until the on_load event gets fired.
I'm curious that I never stumbled upon that, It bugs me a little bit that I can not think of a "nice" solution.