0

我正在使用一个名为tipTip (http://code.drewwilson.com/entry/tiptip-jquery-plugin) 的jquery 插件。我将它用于电子商务网站，当用户将鼠标悬停在产品图像上时，会出现一个信息框，其中包含有关产品的额外详细信息。

tipTip 的默认行为是，一旦用户将鼠标从链接上移开，悬停框就会消失。您还可以设置 keepAlive: true 以要求用户将鼠标移到悬停框上以使该框消失。这两种情况都不适合我。我在悬停框中有链接，因此用户需要能够进入该框而不会消失。但我也不希望用户被要求输入框使其消失。移开链接和框应该使它消失。

为了解决这个问题，我一直在尝试将 jquery delay() 放入tipTip javascript。我也尝试过使用 setTimeout。但我一直发现，我所能做的就是悬停框一直存在，直到用户移动到另一个链接。而我希望 delay() 意味着它在我指定的毫秒数后消失，而不管用户是否已经移动到另一个链接。

您可以在此处查看完整的tipTip js 代码：http ://code.google.com/p/geoapps/source/browse/trunk/capstones/talha_khopekar_2012/jquery.tipTip.js?spec=svn108&r=108

我一直试图通过修改最后几行来实现延迟。我尝试添加延迟如下：

 function deactive_tiptip(){
                                    opts.exit.call(this);
                                    if (timeout){ clearTimeout(timeout); }
                                    tiptip_holder.delay(1000).fadeOut(opts.fadeOut);
                            }

但正如我所说，这样做的效果是悬停框保持原位，直到用户移动到另一个链接，并激活一个新的悬停框。我真的不明白这是为什么。我的理解是延迟功能应该简单地将淡出延迟 1 秒，然后淡出应该正常进行。

4

2 回答 2

1

在尝试延迟另一个函数的调用时，我对这个 js 函数有一些运气。

window.setTimeout(function(){callFunction(params);}, 4000);

让我知道这是否有帮助。我有一袋js的技巧。

问候，

于 2012-03-26T22:26:06.230 回答
1

因此，您真正想要做的是将工具提示包含在热点区域中，并且仅在/如果用户同时离开初始项目和工具提示时停用。

找到调用 deactivate_tiptip() 函数的 'mouseout' 事件所在的位置，并为 tooltip 类添加一个 'add' 函数。我不知道架构，但它可能看起来像这样：

tiptip.mouseOut(function () { deactivate_tiptip(); }; // Original
tiptip.add(".TOOLTIP").mouseOut(function () { deactivate_tiptip(); }; // Ammended

// OR:

tiptip.on("mouseOut", function () { deactivate_tiptip(); }; // Original
tiptip.add(".TOOLTIP").on("mouseOut", function () { deactivate_tiptip(); }; // Ammended

您必须将“.TOOLTIP”更改为正确的类。仅当您离开两者时，这才应该触发停用功能。

于 2012-03-26T22:29:45.960 回答