jQuery mouseenter / mouseeout效果 - 不是第一次悬停

Question

我认为这很容易 - 用jQuery做简单的悬停效果。但是我对这段代码有一些奇怪的行为：

jQuery('.has-children').on({
    mouseenter: function () {
          jQuery(this).find('.sub-menu').fadeIn();
      },
    mouseleave: function () {
          jQuery(this).find('.sub-menu').fadeOut();
      }
});

完整代码：http://jsfiddle.net/cachaito/R5qnt/2/

首次加载页面后，悬停效果没有淡入淡出，只是普通的css悬停。下一个终于用jQuery淡出了。任何人都可以向我解释一下吗？

更新

我也尝试过使用jQuery .hover（）和.fadeToggle（）;但它的行为也很奇怪并且相反的工作方式：mosueenter是隐藏的。子菜单和mouseleave是揭示内容： - /

jQuery('.has-children').hover(function () {
    jQuery(this).find('.sub-menu').stop(true, true).fadeToggle();
});

完整代码：http://jsfiddle.net/cachaito/R5qnt/5/

Answer 1

您的CSS设有:hover，其中设置display: block。这意味着您需要先在集合上调用hide()。

jsFiddle