Multiple, automatic, different effects on one jQuery Cycle banner

Question

I want to use jQuery cycle to make a banner with several elements that have different automatically playing effects.

For instance I want the image to fade in and out. And the text on top of the image to scroll from left to right.

I made the following HTML:

<div class="slideshow">
    <div>
        <p>txt</p>
        <img src="images/banner1.jpg" alt="banner1" />          
    </div>
    <div>
        <p>txt2</p>
        <img src="images/banner2.jpg" alt="banner2" />      
    </div>
</div>

I tried to initiate a second jQuery cycle instance with an after inside the first. But that doesn't work.

$('.slideshow').cycle({
    fx: 'fade',
    after: function(currSlideElement, options) {
        $('.slideshow p').cycle({
            fx: 'scrollHorz'
        });
    }
});

I also tried two totally different .cycle instances but then I got a next is undefined error.

I know what you're asking, and I don't know the answer, but you do know the link to the multiple effects is jquery.malsup.com/cycle/multi.html ... but I don't think that addresses your issue, if I understand it correctly. You want 2 separate cycles, one right after the other, each doing their own thing. I would say pay close attention to and make sure the jquery.cycle.all.js-1.7.1 loads before anything, so put that higher up on in between your head tags. — Jason Weber
Thank you for your reply! And yes, that's exactly what I want to do. Only on the same DIV. In the example the multi effect is loaded on two different DIV's. — jansmolders86
I'm pretty sure you will need to write your own transition. Here is a similar question that I answered that may point you in the right direction: <stackoverflow.com/questions/9177471/…> — lucuma
Yup, I see know that I needed to write something myself in the callback of Cycle. — jansmolders86