0

最後に、私の最初の-うまくいけば-簡単な質問です。

私はクライアント向けのツールを作成しています。クライアントにアクセス情報を提供するときにその使用方法を説明する予定ですが、念のため、ポップアップの「ツールチップ」を用意しています。

ページ上の要素を確認し、ツールチップをポップアップして、少し遅れて次の要素に移動するタイプのチュートリアルを作成しようとしています（明らかに最初に要素を非表示にします）。

これが私が持っているものです：「＃show-help」は私のボタンです。「。hashelp」はクラスにツールチップがあることを意味し、「。help」は実際のツールチップです。現在、すべての「.hashelp」要素が強調表示されていますが、ツールのヒントは表示されていません。「i」を使用して、各ステップを段階的に遅らせています。

$("#showhelp").click(function(){
         var i = 0;
            $(".hashelp").each(function(){
                $(this).find(".help").eq(0).css("top",$(this).offset().top +10);
                $(this).find(".help").eq(0).css("left",$(this).offset().left +10);
                $(this).delay(i*5000).effect("highlight", {color: "yellow"},5000);
                $(this).find(".help").eq(0).delay(i*5000).show().delay((i+1)*5000).hide();
                i++;
         });
    });

どんな助けでも素晴らしいでしょう！

4

1 に答える 1

1

あなたの問題は、の使用にありdelay()ます。残念ながら、jQuery のアニメーション効果フレームワークでしか機能しません。delay()これは、 API ドキュメント1で明示的に説明されています。

キュー内の後続のイベントのみが遅延されます。たとえば、これはエフェクト キューを使用しない .show() または .hide() の引数なしの形式を遅らせません。

したがって、それを処理する方法にはいくつかのオプションがあります。コードを修正する最も簡単な (パフォーマンスが少し重い場合) 方法は、「アニメーション化」show()しhide()、持続時間を 0 にすることです。

$(this).find(".help").eq(0).delay(i*5000).show(0).delay((i+1)*5000).hide(0);

ただし、エフェクト キューに何もない可能性があるため、最初の遅延が機能しない可能性があることも覚えておく必要があります (これは私の弱点なので、試してみてください)。hide(0)何かがエフェクトキューにあることを確認するために、そこに余分なものを投げる必要があるかもしれません:

$(this).find(".help").eq(0).hide(0).delay(i*5000).show(0).delay((i+1)*5000).hide(0);

物事を機能させるために必要な場合にのみ、これを行ってください。

別の方法として、一連のsetTimeout()呼び出しを使用することもできますが、これはコーディングが面倒なので、パフォーマンスの問題が発生した場合にのみ使用してください。

于 2012-09-06T03:31:23.397 に答える