Question

使用jQuery Cycle2插件回调事件处理幻灯片演示脚本。实际循环本身使用div元素上的淡入淡出过渡。在div中是图像。然后我使用回调事件来动画从右到左屏幕外的图像。然后，下一个事件会在右侧的屏幕上为图像设置动画。

该脚本有效，但我遇到的问题是图像动画按淡入淡出过渡顺序运行。一旦触发事件，图像就会滑出视图并且div会立即淡出。我试图实现的效果就像这个模型：

触发事件
Div淡入
短暂延迟
图片动画幻灯片
触发事件
图片动画滑出
短暂延迟
Div淡出

基本上，我希望在循环插件淡入淡出过渡运行之前让图像动画完成。我无法弄清楚如何设置延迟。

作为参考，Cycle2 API：http://jquery.malsup.com/cycle2/api/

$('.slides').on('cycle-next, cycle-before', function(e, opts) {
    $('.slide.active img').each(function() {
        $(this).stop().animate({
            left: -3000,
        }, 1000);
    });
});

$('.slides').on('cycle-next', function(e, opts) {
    $('.slide.active img').each(function() {
        $(this).css({
            left: 3000,
            display: 'block'
        });
        $(this).stop().animate({
            left: 0
        }, 1000, 'easeOutQuad');
    });
});

任何人都可以提供的帮助将非常感激！

编辑：设置工作脚本的快速小提琴：http://jsfiddle.net/ardsN/

Answer 1

最干净的方法是在Cycle2插件Cycle2 Advanced API

中定义它

以下是Malsup如何使用shuffle和tile插件完成此操作。

Answer 2

尝试以这种方式获取滑块的状态：

jQ('.cycle-slideshow').data( 'cycle.opts').busy

你可以使用：

jQ( document ).ready(function() {
    jQ(document.documentElement).keypress(function (e) {
        if (e.keyCode == 39 && jQ('.cycle-slideshow').data( 'cycle.opts').busy !== true)
        {
           jQ('.cycle-slideshow').cycle("next");
        }
        if (e.keyCode == 37 && jQ('.cycle-slideshow').data( 'cycle.opts').busy !== true)
        {
            jQ('.cycle-slideshow').cycle('prev');
        }
    });
});

使用jQuery Cycle插件在动画之前和之后延迟

2 个答案: