jQuery 的动画问题

Question

Fiddle.

相关代码（在fiddle中也有注释）：

// 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
});

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

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

Answer 1

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

有两种可能的解决方案：

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

另一种解决方案是使用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

Fiddle

这是一种更顺畅的解决方案。它会将元素正确地设置为 .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();

Fiddle

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