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 回答