Question

最后我的第一个 - 容易的问题。

我正在为我的客户编写一个工具，我计划在向他们提供访问信息时解释如何使用它，但为了以防万一，我会弹出“工具提示”来帮助他们。

我正在尝试输入一种教程，它将遍历页面上的元素，弹出他们的工具提示，然后在短暂的延迟后转到下一个元素（显然首先隐藏元素）< / p>

这是我得到的： “＃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++;
         });
    });

任何帮助都会很棒！

Answer 1

您的问题在于您使用delay()。不幸的是，它只适用于jQuery的动画效果框架。这在delay() API文档¹中明确说明：

仅延迟队列中的后续事件;例如，这将不延迟.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()次调用，但这对代码来说会很尴尬，所以只有在看到性能问题时才会这样做。

如何使用jquery循环遍历元素并显示/隐藏它们？

1 个答案: