防止jquery褪色很多次

时间:2014-04-09 12:47:29

标签: javascript jquery

需要多次防止提示的出现(即使光标不在链接上,也没有指向链接的线索仍然存在)。

$(function () {
 $(".area_tooltip").mouseover(function () {
   var tooltip = $("div#" + $(this).attr("id") + "");
   tooltip.fadeIn();
  }).mouseout(function () {
   var tooltip = $("div#" + $(this).attr("id") + "");
   tooltip.fadeOut();
  });
});

要了解将红色方块移动多次的问题,然后将其沿

方向移除

http://jsfiddle.net/8LnTC/1/

我为我糟糕的英语道歉

1 个答案:

答案 0 :(得分:3)

您需要先停止任何排队的动画...

$(function () {
    $(".area_tooltip").mouseover(function () {
        var tooltip = $("div#" + $(this).attr("id") + "");
        tooltip.stop().fadeIn();
    }).mouseout(function () {
        var tooltip = $("div#" + $(this).attr("id") + "");
        tooltip.stop().fadeOut();
    });
}); 

<强> Working jsfiddle example...

顺便说一句,您不应该有多个具有相同ID的元素。您需要重新考虑如何将元素相互关联 - 也许使用数据属性。

这是一个建议的替代方案......

<强> Working jsfiddle example...

HTML更改

<a class="area_tooltip" data-associated-tooltip="item_1">show</a>

Javascript更改

$(function () {
    $(".area_tooltip").mouseover(function () {
        var tooltip = $("div#" + $(this).data("associated-tooltip"));
        tooltip.stop().fadeIn();
    }).mouseout(function () {
        var tooltip = $("div#" + $(this).data("associated-tooltip"));
        tooltip.stop().fadeOut();
    });
});

您将提示ID放在属性data-associated-tooltip中,然后您可以使用$(this).data("associated-tooltip")访问该ID。这将消除任何可能导致难以解决的问题的ID冲突。