# Effects queues

**URL:** <https://www.ruby-forum.com/t/effects-queues/69452>\
**Category:** Rails\
**Created:** [September 21, 2006, 4:56am UTC](https://www.ruby-forum.com/t/effects-queues/69452 "2006-09-21T04:56:12Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![yardboy](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/y/9de0a6/32.png) [@yardboy](https://www.ruby-forum.com/u/yardboy)\
**Post date:** [September 21, 2006, 4:56am UTC](https://www.ruby-forum.com/t/effects-queues/69452/1 "2006-09-21T04:56:12Z")

</div>

I’m trying to string together a few visual effects and having a ton of  
trouble making it work. I’ve searched this forum and read the couple of  
threads dealing with this but I’m not having much luck with solutions  
presented there. Essentially, I want to fade an image, replace it with a  
new image, then appear it back. But in the interests of simplifying the  
problem, let’s just say I want to fade an image and then appear it back  
(gradually, using the appear effect).

So, I have this in a view:

\<%= image\_tag("products\_main\_forever.jpg") %\>

\<%= image\_tag("products\_main\_wood.jpg") %\>
\<%= link\_to\_remote 'Change1', :url =\> {:action =\> 'change\_image1'} %\> \<%= link\_to\_remote 'Change2', :url =\> {:action =\> 'change\_image2'} %\>

and in my controller I have this:

def change\_image1  
render :update do |page|  
page.visual\_effect(:fade, “testimage1”, {:queue =\> “front”})  
end  
end

def change\_image2  
render :update do |page|  
page.visual\_effect(:fade, “testimage2”, {:queue =\> “front”})  
page.visual\_effect(:appear, “testimage1”, {:queue =\> “end”})  
end  
end

And it works fine - click the first link and the first image fades;  
click the second link and the second image fades, then the first image  
appears, in order.

However, if I try to fade and appear the same image, with something like  
this in the controller:

def change\_image2  
render :update do |page|  
page.visual\_effect(:fade, “testimage2”, {:queue =\> “front”})  
page.visual\_effect(:appear, “testimage2”, {:queue =\> “end”})  
end  
end

It does not work. The image fades, then just comes back in a blink  
without the appear effect showing.

I see some stuff out there about :beforeStart and whatnot but can’t seem  
to find any syntax for laying that out that works to solve the problem.  
I’ve also gone over and over  
[http://blog.railsdevelopment.com/pages/effect/queue/](http://blog.railsdevelopment.com/pages/effect/queue/) and can’t find an  
answer there either.

I would appreciate any help or links/pointers to some help.

c.

---

<div class="post-metadata">

**Author:** ![yardboy](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/y/9de0a6/32.png) [@yardboy](https://www.ruby-forum.com/u/yardboy)\
**Post date:** [September 21, 2006, 5:06am UTC](https://www.ruby-forum.com/t/effects-queues/69452/2 "2006-09-21T05:06:30Z")

</div>

ive had this problem as well. the fade and the appear are happening on  
top  
of each other and the element seems to get confused and dissapears at  
the  
end instead of staying visible. the only solution i’ve found is to  
write it  
in raw JS; whether by using the \<\< “new Effect(…” method in my  
controller/rjs template or simply coding it manually in the view as  
inline  
JS.

id certainly be interested in hearing a better solution!

ed

On 9/20/06, Cayce B. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) wrote:

> So, I have this in a view:  
> page.visual\_effect(:fade, “testimage1”, {:queue =\> “front”})  
> And it works fine - click the first link and the first image fades;  
> end
> 
> I would appreciate any help or links/pointers to some help.
> 
> c.
> 
> –  
> Posted via [http://www.ruby-forum.com/](http://www.ruby-forum.com/).
> 
> >

–  
Ed Hickey  
Developer  
Litmus Media  
816-533-0409  
removed\_email\_address@domain.invalid  
A Member of Think Partnership, Inc  
[www.ThinkPartnership.com](http://www.ThinkPartnership.com)  
Amex ticker symbol: THK

---

<div class="post-metadata">

**Author:** ![yardboy](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/y/9de0a6/32.png) [@yardboy](https://www.ruby-forum.com/u/yardboy)\
**Post date:** [September 21, 2006, 12:37pm UTC](https://www.ruby-forum.com/t/effects-queues/69452/3 "2006-09-21T12:37:23Z")

</div>

def change\_image2  
render :update do |page|  
page.visual\_effect :fade, “testimage2”, :duration =\> 0.5  
page.delay 0.5 do  
page.visual\_effect :appear, “testimage2”, :duration =\> 0.5  
end  
end  
end

---

<div class="post-metadata">

**Author:** ![yardboy](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/y/9de0a6/32.png) [@yardboy](https://www.ruby-forum.com/u/yardboy)\
**Post date:** [September 21, 2006, 4:16pm UTC](https://www.ruby-forum.com/t/effects-queues/69452/4 "2006-09-21T16:16:00Z")

</div>

That rocks!

Thanks so much for the help.

c.

Peter De Berdt wrote:

> def change\_image2  
> render :update do |page|  
> page.visual\_effect :fade, “testimage2”, :duration =\> 0.5  
> page.delay 0.5 do  
> page.visual\_effect :appear, “testimage2”, :duration =\> 0.5  
> end  
> end  
> end