0

それぞれにツールチップを作成した 3 つの画像があります。最初のツールヒントが 2 秒間表示され、2 番目の間隔で 2 番目のツールヒントがフェードインするなど、時間間隔内でツールヒントを表示したかったのです。

たとえば、この関数で実行できます

function cycle(id) {
    var nextId = (id == "block1") ? "block2": "block1";
    $("#" + id)
        .delay(shortIntervalTime)
        .fadeIn(500)
        .delay(longIntervalTime)
        .fadeOut(500, function() {cycle(nextId)});
}

今私が欲しいのは、各画像でmoseoverアクションが発生したときにサイクル機能を停止し、対応するツールチップを表示することです。そして、マウスが再び離れたときに、サイクル関数が起動します。

4

1 に答える 1

0

私がすべてを正しく理解している場合は、このコードを試してください。画像の上にカーソルを合わせると処理が停止し、画像から離れると処理が続行されます。stop() 関数は、fadeOut()、slideIn()、... jquery の関数のように実装すると、カスタム関数で機能します。

  $('#' + id)
.fadeIn(500, function () {
   var img = $(this).find('img'),
       self = $(this),
       fadeOut = true;

   img.hover(function () {
                fadeOut = false;                    
            }, 
            function () {
                window.setTimeout(function () {
                    self.fadeOut(500);
                }, 2000);
            }
      );

    window.setTimeout(function () {
        if (fadeOut === false) {
            return;
        }
        self.fadeOut(500);
    }, 2000);
});​
于 2012-11-09T11:50:09.363 に答える