1

小提琴。

相关代码（也在小提琴中注释）：

// tooltip positioning on hover and overlay fade on all li's except for submenu items that are not the last child
$("ul:not(.sub-menu) > li, ul.sub-menu > li:last-child").not(":has(ul.sub-menu)").hover(function () {
  var $this = $(this),
    title = $(this).children("a").data("title"),
    posL = $this.offset().left + ($this.width() / 2),
    posT = $this.height(),
    tooltip = $("#tooltip"),
    overlay = $("#overlay");

  $this.addClass("over-down");
  overlay.stop(true).fadeIn("slow"); // RELEVANT FOR QUESTION
  tooltip.stop(true, true).text(title).animate({ // RELEVANT FOR QUESTION
    "left": posL - (tooltip.width() / 2),
      "top": posT + $this.offset().top + 20
  }, 300).fadeIn("fast");
}, function () {
  var $this = $(this),
    tooltip = $("#tooltip"),
    overlay = $("#overlay");

  $this.removeClass("over-down");
  overlay.stop(true).fadeOut("slow"); // RELEVANT FOR QUESTION
  tooltip.stop(true).fadeOut(400); // RELEVANT FOR QUESTION
});

在小提琴中，尝试将鼠标悬停在一个项目上，然后短暂离开它并悬停另一个项目。你会看到#overlaydiv 已经部分淡出，#tooltipspan 也是如此。我想要的是两者之间的平滑过渡，所以通常情况下，工具提示和覆盖应该再次淡入到 100%，但它们没有。我一直在搞砸，.stop()但似乎没有任何效果。

每个测试的浏览器（IE10、FF、Chrome）都会出现此问题。

4

1 回答 1

1

当您.stop(true)在 a 中间时fadeOut，该项目将不会设置为，display:none因此下一个fadeIn将无效。

有两种可能的解决方案：

.stop(true, true)在 the 之前使用将fadeIn强制在元素上突然display:none出现，从而连续启用 a fadeIn。这不是一个非常顺利的解决方案。小提琴

另一种解决方案是使用fadeTo而不是fadeIn. fadeTo将动画不透明度类似于fadeIn，但没有display:none要求。它也适用于将它们淡入的隐藏元素fadeIn：

$this.addClass("over-down");
overlay.stop(true).fadeTo(600, .75); //edited here
tooltip.stop(true, true).text(title).animate({ //here*
    "left": posL - (tooltip.width() / 2),
    "top": posT + $this.offset().top + 20
}, 300).fadeTo(200, 1); //and here

小提琴

这是一种更顺利的解决方案。它将.75独立于当前的不透明度或显示将元素正确地设置为不透明度。

*在工具提示中添加了一个，因此在您排队.stop(true, true)时它不会保持半褪色。fadeTo如果您想滑动它们，请尝试：

var do_dequeue = tooltip.is(':visible');
tooltip.stop(true).text(title).animate({ // RELEVANT FOR QUESTION
    "left": posL - (tooltip.width() / 2),
    "top": posT + $this.offset().top + 20,
}, 300).fadeTo(200, 1);
if (do_dequeue) tooltip.dequeue();

小提琴

var在do_dequeue准备移动然后淡入队列之前跟踪工具提示是否部分淡化，如果它是部分淡化，那么它不会等待工具提示被放置在元素下，然后再将其淡化回完全不透明度。我想这是它可以得到的更顺畅。=]

于 2013-01-11T20:06:51.670 回答