1

jquery ツールのスクロール可能なプラグインの動作を少し実装してカスタマイズしようとしています。私が欲しいのは、次の項目にスライドする直前に関数を呼び出し、関数が完了するのを待ってから次の項目にスライドすることです。

API からonBeforeSeek関数を試してみましたが、残念ながら目的の関数 (f.ex. setTimeout など) を呼び出し、終了するのを待たずに、すぐに次の項目にスライドします。

関数が完了するまで、次の項目へのスライドを防ぐ方法を知っている人はいますか? onBeforeSeek を介して絶対に発生する必要はありませんが、前/次をトリガーするいくつかのイベントの結果を要約しているため、問題ないように思えました。

マークアップ:

<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に接続するフィドルでスライダーが壊れます...

どんな提案でも役に立ちます。ありがとう！マイケル

4

1 に答える 1

0

編集

したがって、基本的に達成したいことは、onBeforeSeek イベントを一時停止し、処理を行ってから再度起動することです。この目的のために、いくつかの jquery プラグインを使用できます (単に「jquery イベント一時停止再開」をグーグルで検索します)。そのうちの 1 つがここにあります。

プラグインを使用したくない場合、またはイベントを処理したくない場合は、このフィドルで私のソリューションを使用できます。イベントをフリーズしてから再起動する代わりに、最初にイベントをキャンセルし、アニメーションを実行し、アニメーション ステータスを完了として変更し、再度イベントを発生させますが、今回はイベントのキャンセルはありません。

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

お役に立てれば。

于 2013-03-07T18:10:03.407 に答える