Change animation depending if next or previous button is clicked

Question

I'm having problem figuring this out.

$('#slider-accueil').cycle({
    next:".slider-next",
    prev:".slider-prev",
    pager:"#slider-pager",
    //fx:'scrollHorz',
    fx: 'custom', 
    cssBefore: {  
        zIndex: 1,
        opacity:0,
        display:"block",
        marginLeft:"-932px"
    }, 
    animIn:  {  
        opacity:1,
        marginLeft:0
    }, 
    animOut: {  
        opacity:0,
        marginLeft:"932px"
    }, 
    cssAfter: {  
        zIndex: 0,
        opacity:0,
        display:"none",
        marginLeft:"-932px"
    },
});

So here is the problem. This does a custom animation of fading out and moving to the left. But I would like, only when you click on the "prev" button, to make it fade out and move to the right instead.

So, bottom-line: Is it possible to make jQuery cycle make another custom animation only when the image change is triggered by a click on the previous button?

score 2 · Accepted Answer · answered Mar 20 '12 at 21:47

You can create your own effect like this: http://jsfiddle.net/3Bzgv/1/

var tog=false;

function go(){
    $.fn.cycle.transitions.myEffect = function($cont, $slides, opts) {
        if (!tog){
            opts.cssBefore= {zIndex: 1, opacity:0, display:"block", marginLeft:"-932px"};
            opts.animIn=  {opacity:1, marginLeft:0};
            opts.animOut= {opacity:0, marginLeft:"932px"};
            opts.cssAfter= {zIndex: 0, opacity:0, display:"none", marginLeft:"-932px"};
        }else{
            opts.cssBefore= {zIndex: 1, opacity:0, display:"block", marginLeft:"932px"};
            opts.animIn=  {opacity:1, marginLeft:0};
            opts.animOut= {opacity:0, marginLeft:"-932px"};
            opts.cssAfter= {zIndex: 0, opacity:0, display:"none", marginLeft:"-932px"};
        }
        tog=false;
    };
}


$(function(){
    go();
    $('.slider-prev').click(function(){
        tog=true;
        go();
    });

    $('#slider-accueil').cycle({
        next:".slider-next",
        prev:".slider-prev",
        pager:"#slider-pager",
        fx: 'myEffect',
    });
});

Change animation depending if next or previous button is clicked

1 Answers1