Jquery Tools Scrollable onBeforeSeek 函数然后滑动到下一个

Question

我正在尝试实现和自定义一些 jquery 工具可滚动插件的行为。我想要的是调用一个函数就在滑动到下一个项目之前，等待函数完成然后滑动到下一个项目。

我从 api 尝试了 onBeforeSeek 函数，但不幸的是它调用了我想要的函数（如 f.ex.setTimeout）并且不等待它完成，它立即滑到下一项。

有人知道如何防止在功能完成之前滑到下一项吗？它不必通过 onBeforeSeek 绝对发生，但在我看来还可以，因为它总结了触发 prev/next 的几个事件的结果。

标记：

<section>
    <div>
        <dl>
            <dt>titre 1</dt>
            <dd><img src="http://placehold.it/350x150"></dd>
        </dl>
        <dl>
            <dt>titre 2</dt>
            <dd><img src="http://placehold.it/350x150"></dd>
        </dl>
        <dl>
            <dt>titre 3</dt>
            <dd><img src="http://placehold.it/350x150"></dd>
        </dl>
    </div>
</section>

<!-- navigation (cubes)  -->
<div class="navi"></div>
<br style="clear: both;">

<!-- navigation prev/next -->
<a class="prev browse left">prev</a> | <a class="next browse right">next</a>

JS：

$('section').css('overflow', 'hidden');

$('section').scrollable({ circular: true }).navigator();

var api = $('section').data("scrollable");//get access to the api functions

api.onBeforeSeek(function(){

    //do something and after this start sliding to the next img

}

http://jsfiddle.net/micka/zhDGC/

奇怪的是，在连接到 api 的小提琴中，滑块会断裂...

任何建议都会有所帮助。谢谢！ 迈克尔

Answer 1

编辑

所以，基本上你想要实现的是暂停 onBeforeSeek 事件，做你的事情，然后再次触发它。为此，您可以使用一些 jquery 插件（只需 google 搜索“jquery event pause resume”），其中一个可以找到 here。

如果您不想使用任何插件或不想处理事件，您可以使用我在此fiddle 中的解决方案。它不是冻结然后重新启动事件，而是第一次简单地取消它，执行动画，将 andimation 状态更改为已完成，然后再次触发它，但这次没有取消事件。

var event_pos_list = [false, false, false];

api.onBeforeSeek(function(event, pos){
    // if the animation is not done - do it and skip the scroll
    if(!event_pos_list[pos]){
        event.preventDefault();
        $('span').animate({marginLeft: (pos*50) + 'px'}, 2000, function(){
            // do the scroll, this time the animation is completed
            event_pos_list[pos] = true;
            api.seekTo(pos);
        });
    }
});
api.onSeek(function(event, pos){
    // after the scroll is done, reset the event_pos_list
    event_pos_list[pos] = false;
});

希望这会有所帮助。