javascript - 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 的 fiddle 使 slider 损坏......

任何建议都可以提供帮助。谢谢! 迈克尔

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

希望这有帮助。