JQuery cycle plugin with different effect on next and previous

Question

Using JQuery cycle, is it possible to have different effects on the next and previous buttons? For example, have the next button scroll left and previous button fade?

I know about the scrollHorz effect for left and right scrolling.

Thanks

Answer 1

It is not possible to specify separate individual effects for the next and prev buttons without modifying the source code of the plug-in.

The closest you can come is specifying multiple effects in the fx options. These will be used in sequence. Example:

$('#slideDiv').cycle({ 
    fx:     'fade,scrollHorz', 
    prev:   '#prev1', 
    next:   '#next1', 
    timeout: 0 
});

So, the first time you click the next or prev buttons, it will use "fade", the next time you click either button, it will use "scrollHorz", then "fade" and so on.

Answer 2

Out of the box, this only works with the transitions which provide a "reverse" animation such as scrollHorz, scrollVert, shuffle.

The nice thing about jQuery Cycle is that you can write your own (or modify) any transition to include your own forward and reverse logic. Check out the Cycle Source and do a search for "scrollHorz". You will see how easy it is to provide logic depending on the direction of the transition (take note of the fwd variable). You can then modify any existing transition to suit your needs.

NOTE: some javascript and math skills required.