Question

我正在使用jQuery Cycle插件作为滑块 - 我需要在每张幻灯片中制作一些fadeIn fadeOut效果。
有没有人有这方面的经验？不幸的是我很在JavaScript创建时没用，我也找不到任何出色的支持文档 Here is a example
我的功能代码如下。

$('#yslider ul').cycle({
           fx:     'fade',
           speed:   'slow',
           timeout: 1000,
           before: first,
           after:    second,
           pager:    '#number',
           pause: 1
        });
        function first(){
            $('.left').fadeOut(800).delay(100).animate({opactiy: 0.5 });
            $('.middle').delay(800).fadeOut(1300).animate({opactiy: 1.0 });
            $('.right').delay(2500).animate({right:'-1980px'}, 700);
        }
        function second(){
            $('.left').fadeIn(1000).delay(300).animate({opactiy: 1.5 });
            $('.middle').fadeIn(1500).delay(500).animate({opactiy: 2.5 });
            $('.right').delay(2500).animate({right: '-26px'}, 700);
        }

Answer 1

您将currentSlideElement和nextSlideElement作为参数传递给转换回调函数，这将使您能够执行以下操作：

function beforeCallback(currSlideElement, nextSlideElement) {
    //find something inside the current Element
    $(currSlideElement).find('.left').fadeIn();
    $(currSlideElement).find('.right').fadeIn();

    //find something inside the next Element
    $(nextSlideElement).find('.left').fadeOut();
    $(nextSlideElement).find('.right').fadeOut();
}

或

function afterCallback(currSlideElement, nextSlideElement) {
    $(currSlideElement).find('.left').fadeOut();
    $(currSlideElement).find('.right').fadeOut();

    $(nextSlideElement).find('.left').fadeIn();
    $(nextSlideElement).find('.right').fadeIn();
}

请参阅http://jquery.malsup.com/cycle/options.html

Answer 2

所有你需要的是之前调用：循环选项.. onBefore初始化你的动画并放一些延迟，然后完成你的动画。我把eq（）只执行当前'li'，因为你对所有滑动标签使用相同的类。

$(document).ready(function(){
    $('#yslider ul').cycle({
       fx:     'fade',
       speed:   'slow',
       timeout: 10000,
       before: pehla,
       pager:   '#number',
       pause: 1
    });
});
var sliderSize = $('#yslider ul li').size();
function pehla(){
    if(i == sliderSize)
        i = 0;
    $('.left:eq('+i+')').fadeIn(800, function(){
        $('.middle:eq('+i+')').fadeIn(1300, function(){
            $('.right:eq('+i+')').animate({right:'0px'}, 700, function(){
                $('.right:eq('+i+')').delay(4400).animate({right: '-1980px'}, 200, function(){
                    $('.middle:eq('+i+')').fadeOut(1300, function(){
                        $('.left:eq('+i+')').fadeOut(800);
                        i++;
                    });
                });
            });
        });
    });
}

你还需要编辑一些css

.left{left:0;display:none;}
.middle{ left: 13px;top: -75px;display:none;}
.right{right:-1980px;}

根据每个幻灯片的总动画持续时间+延迟设置超时在这里我设置10000毫秒=开始动画（800 + 1300 + 700）+延迟（4400）+最终动画（900 + 1300 + 800）

jQuery Cycle - 在使用fadeIn fadeOut Effect动画到下一张幻灯片之前完成的'之前'功能

2 个答案: