How can I run an appear effect and a fade effect in scriptaculous? I need them to run in tandam so that no other effect can slot inbetween...

Question

Hi,

Ive been fiddling with this for hours and hours and just cant get it right. First off my sites are already using Prototytpe and Scriptaculous, and to change would take a long time.

Basically I am after achieving a slideshow effect similar to jQuery Cycle plugin. I have written most of it but cant get over this hurdle:

I need the user to be able to press a control button which will skip the slide to which ever one they have picked. My problem is that if a fade / appear effect is running, then it causes an overlap.

I am using queues and they are in their own scope. The problem as I see it is that the fade effect on one slide and the appear effect on the next slide are separate functions. Which means that if the user clicks the control button to move to another slide whilst the animation is inbetween fade & appear, then the next cycle will slot itself in the queue between those 2 effects. The default is to append to the end of the existing queue, which should be fine. But if the appear hasnt been added when a new fade is instantiated, then the queue messes up.

I can make it so nothing happens if animation is in effect but thats not the effect I am after. I want to be able to click a slide and whatever is happening to effectively stop and the next slide appear.

This is an example of what I am after: http://www.zendesk.com/

Im sorry if that doesnt make sense. Its a tough one to explain.

Thanks Lee

Answer 1

If you don't find anything by the lib you can just use the DOM and some JS like in this question: http://stackoverflow.com/questions/2207586

Answer 2

I managed to fix my own problem last night.

I had already tried this but couldn't get it to work right. All I done was added a flag variable which is true if any animation is running (var running = true; [or false])

If the user clicks the pager buttons to move the slide (lets say from slide 1 to slide 4), and if the slide is already in motion (then var running == true), then the code finds all queued effects in the system, deletes them, and then hides all the slides. It then just starts a new cycle to slide 4, as the user requested.

Doesn't matter how fast you click the pager buttons now, it works seamlessly. :)