1


0

scrollTo()プラグインをテストしましたが、スクロールするアニメーションを停止する方法が必要なので、serialScroll()を見ています。

これが私がscrollToで使ったものです:

$( '#scroller')。scrollTo( '1000px'、3000);

私の質問は、どうやってこれをserialScrollで同じことをするのですか? scrollToと同じように動作させることはできません。何をするかということではなく、単にたくさんの追加オプションを追加するだけです。

1 Answer


2


SerialScroll`は( stop`イベントを含む)いくつかのイベントをバインドするので、クリックに基づいてスクロールを開始/停止するために `toggle`を使うことができます:

// setup serialScroll to scroll the images in the 'serialScroll-test' div along
// the y-axis.
$( '#serialScroll-test')。serialScroll({items: 'img'、期間:2000、軸: 'y'、間隔:1、力:true});
// since we used the "force: true" option to auto-start the animation we use
// "stop" as the first function to toggle and "start" second.
$( '#serialScroll-test')。toggle(function(){$( '#serialScroll-test')。trigger( 'stop.serialScroll');}、function(){$( '#serialScroll-test') .trigger( 'start.serialScroll');});

次のHTML上で


http://jsbin.com/uroya/edit[ソースの編集] http://jsbin.com/uroya/edit

_note: stop`イベントが呼ばれると、アニメーションはすぐにではなく、スクロールされているアイテムで止まります。 そのため、2番目の画像にスクロールしている間に最初の画像をクリックすると、2番目の画像が表示されるまでアニメーションが継続して停止します。 これはまた `cycle:true(デフォルト)を使うとき最初の画像に戻る間にクリックすると最初の画像が見えるまでアニメーションが続いて停止することを意味します。

編集

もう少し深く見た後、私はAriel Fleslerのブログ(プラグインの作者)で この投稿を見つけました。 スニペットのセクションには、ホバー時にアニメーションを停止する方法に関するスクリプトが含まれています。 それはメモが含まれています:

// You can temove the .stop() to let it finish the active animation
...
$(this).stop()。trigger( 'stop');
...

トリガー内の追加の `stop()`に注目してください。 上記のコードに基づいて、 `toggle()`関数を以下のように変更することができます。

$( '#serialScroll-test')。toggle(function(){$( '#serialScroll-test')。stop()。trigger( 'stop.serialScroll');}、function(){$( '#serialScroll -test ')。stop()。trigger(' start.serialScroll ');});

望ましい効果を生み出すために。 更新した例はここ]( 編集します