Jquery Cycle and Effects inside each Slide

Question

I want to create a carousel using Cycle with the following effects:

1. The slides fade in or slides when user clicks a prev/next button
2. When the slide finishes loading, there are text and images in each slide that I want to animate as well with a slide in or fade in effect.

Questions: 1. How could one do it so that the transitions are smooth (like that of a flash slideshow)? I thought about hiding the text/images and animating them when the "after" function is called.

1. And how would I animate the text on the first slide when the use comes to the page. Cycle animates each page when you navigate through them.

Thanks in advance.

Vincent

Answer 1

Keeping the transitions smooth is a balance between the complexity of the slide, the efficiency of the javascript interpreter rendering the page, and the processing power of the client. They only part you can control is the complexity of the slide: minimize graphics and animation. Stop running animations when a slide is leaving view, and begin animation of the slide that just enters view to minimize the processing load.

Here is an example of how to use the before: and after: callbacks to trigger slide-specific events and other plugins: