根据单击下一个或上一个按钮来更改动画答案

【问题标题】：Change animation depending if next or previous button is clicked根据单击下一个或上一个按钮来更改动画
【发布时间】：2012-03-21 05:47:32
【问题描述】：

我无法解决这个问题。

$('#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"
    },
});

所以这就是问题所在。这会执行淡出和向左移动的自定义动画。但我想，只有当您单击“上一个”按钮时，才能使其淡出并向右移动。

所以，底线：只有当点击上一个按钮触发图像更改时，是否可以让 jQuery 循环制作另一个自定义动画？

【问题讨论】：

标签： jquery jquery-cycle

【解决方案1】：

您可以像这样创建自己的效果：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',
    });
});

【讨论】：