根據是否點擊下一個或上一個按鈕更改動畫

Question

我有問題解決這個問題。

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

所以這裏是問題所在。這是一個淡出和移動到左側的自定義動畫。但是我希望，只有當你點擊「prev」按鈕時，才能淡出並向右移動。

那麼，底線：是否有可能讓jQuery循環只有當點擊上一個按鈕觸發圖像更改時纔會創建另一個自定義動畫？

Answer 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', 
    }); 
});