Изменение анимации в зависимости от нажатия следующей или предыдущей кнопки - PullRequest
Новая
       29

Изменение анимации в зависимости от нажатия следующей или предыдущей кнопки

2 голосов
/ 20 марта 2012

У меня проблемы с выяснением этого. 

$('#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 создавать другую пользовательскую анимацию только тогда, когда изменение изображения инициируется нажатием на предыдущую кнопку?

1 Ответ

2 голосов
/ 21 марта 2012

Вы можете создать свой собственный эффект следующим образом: 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',
    });
});
...