Jquery Tools可滚动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插件（只需谷歌“jquery事件暂停简历”），其中一个可以找到here。

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

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;
});

希望这有帮助。