3

Giva Labs jQuery Marquee pluginで遊んでいます。jsFiddle の例はこちらです。

この例には、 と の 2 つのトグル行のテキストがありFirst lineますSecond row。マウス カーソルを水色のボックスの上や外に出し続けると、テキストがおかしくなり始めます。ループ内でマウスの動きの速度を遅いものから速いものに変更すると、狂気は最も強くなります。

「jquery animate stop」をグーグルで検索したところ.stop()、.clearQueue()効果が見つかりました。これらをマーキー効果に次のように取り付けてみました。

$("#marquee").marquee().stop();

この：

$("#marquee").marquee().clearQueue();

また、次のようにします。

$("#marquee").marquee()
    .hover(function() {
        $(this).clearQueue();
    });

プラグインの組み込みメソッドも試しました：

$("#marquee").marquee()
    .hover(function() {
        $(this).marquee("pause");
    })
    .mouseout(function() {
        $(this).marquee("resume");
    });

それらのどれも機能しませんでした。

このグリッチを取り除く方法は？

4

2 に答える 2

4

更新/解決済み:

コード: jsFiddle

ソリューションの概要:

  • 追加したvar timedout
  • timedout中にセットscroll()
  • clearTimeout(timedout)内部に電話するpause()

非常に低い値pauseSpeed(たとえば 2 など) を設定すると、バグは発生しませんpause()。resume()

具体的には、このコードのビットは次のpause()とおりです。

if( $marquee.data("marquee.showing") != true ){
    // we must dequeue() the animation to ensure that it does indeed stop animation
    $lis.filter("." + options.cssShowing).dequeue().stop();
}

のこのコードのビットresume():

if ($marquee.data("marquee.showing") != true) scroll($lis.filter("." + options.cssShowing), 1);

そして、このコードのビットscroll()：

setTimeout(function() {
    // if paused, stop processing (we need to check to see if the pause state has changed)
    if (paused == true) return false;

    // scroll the message down
    $li.animate({
        top: (options.yScroll == "top" ? "+" : "-") + $marquee.innerHeight() + "px"
    }, options.showSpeed, options.fxEasingScroll);
    // finish showing this message
    finish($li);
}, delay);​

私が見る限り、問題が発生するのは、dequeue().stop()[これは理にかなっています] が即時でありscroll(...)、遅延を伴ういくつかのコードがあるためです ( pauseSpeed).

したがって、何が起こるかは次のとおりです。

  1. でアニメーションがキャンセルされますpause()
  2. 次に、2000 ミリ秒で発生するようにタイムアウト関数を設定するresume()呼び出しscroll()
  3. 実際には、ホバーして移動するたびに1つ作成されます
  4. それがすべてを台無しにしてしまうのです...どうやってか聞かないでください、私は今かなり疲れています

これを修正するには、コードを編集して、アニメーションを停止するたびjquery.marquee.jsに実際に呼び出すことをお勧めします。clearTimeout()

于 2012-07-15T04:01:02.240 に答える
2

ここでコードをJSFiddleに更新しました。 http://jsfiddle.net/AkQgH/7/

速い動きを再現できません。高速スクロールを取得する理由は、移動すると特定のブロック内のカーソルで一時停止と再生イベントが生成されるためです。使用できます

setTimeout(
  function() 
  {
  }, 5000);

一時停止イベントの後、待機したい時間だけ遅延し、奇妙な効果を生み出しません。

URLを更新しました。コード内で「marque」ではなく「marquee」である必要がある限り、JSエラーを削除しました。-また、他のエラーは代わりに「オーバー」であり、「マウスオーバー」を使用する必要があります

于 2012-07-05T20:19:53.553 に答える