1

使用 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/

4

2 回答 2

1

最简洁的方法是在 Cycle2 插件Cycle2 Advanced API中定义它

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

于 2013-04-08T15:31:39.920 回答
0

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

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');
        }
    });
});
于 2014-05-27T16:04:36.933 回答