Question

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

// 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

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

有两种可能的解决方案：

在.stop(true, true)之前使用fadeIn将强制元素突然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在准备移动然后淡入淡出队列之前跟踪工具提示是否部分淡化，如果部分淡化则不会等待工具提示在淡化之前放置在元素之下回到完全不透明。我想这可以得到更顺畅。 =]

jQuery的动画问题

1 个答案: