I believe you should queue your divs to hide/show them. In case it
helps this is something I have tested and am planning to use in one of
my applications. It needs a lot of work to make it better and DRYer
but it still does the work I need it to do. It is all based on the
model errors but I think it could give you an idea about the queuing
of the effects. I hope it helps.
view:
<table style="width: 100%;" >
<tr class="tab_rows">
<%= link_to_function get_tab_link('first_link'),
get_tab_effects('first_link') -%>
<%= link_to_function get_tab_link('second_link'),
get_tab_effects('second_link') -%>
<%= link_to_function get_tab_link('third_link'),
get_tab_effects('third_link') -%>
.....
</tr>
.....
</table>
.....
<div id="sections">
<div id="first_link" <%= display?('first_link') -%>>
<div id="section">
<%= render :partial => 'first_link' %>
</div>
</div>
<div id="second_link" <%= display?('second_link') -%>>
<div id="section">
<%= render :partial => 'second_link' %>
</div>
</div>
<div id="third_link" <%= display?('third_link') -%>>
<div id="section">
<%= render :partial => 'third_link' %>
</div>
</div>
...
</div> <!-- sections -->
helper:
def get_tab_link(section)
'<td>' + section.capitalize + '</td>'
end
def get_tab_effects(section)
case section
when 'first_link'
"new Effect.Fade('second_link', {duration:0.1});
new Effect.Fade('third_link', {duration:0.1,
queue: 'end'});
new Effect.Appear('first_link', {duration:0.1, queue:
'end'});"
when 'second_link'
"new Effect.Fade('first_link', {duration:0.1});
new Effect.Fade('third_link', {duration:0.1, queue:
'end'});
new Effect.Appear('second_link', {duration:0.1, queue:
'end'});"
when 'third_link'
"new Effect.Fade('first_link', {duration:0.1});
new Effect.Fade('second_link', {duration:0.1, queue:
'end'});
new Effect.Appear('third_link', {duration:0.1, queue: 'end'});"
....
end
def display?(section)
case section
when 'first_link'
return nil if @my_model.errors.empty? or errors_on? section
when 'second_link'
return nil if errors_on? section unless errors_on? 'first_link'
when 'third_link'
return nil if errors_on? section unless (errors_on?
('first_link') || errors_on?('second_link'))
...
end
# Default to not display section
'style = "display:none"'
end