0

对，所以我的网站上有一个主菜单，我正在使用 Hover Intent 插件来显示子菜单。悬停时菜单会随着缓动淡入，当然当鼠标移开时会随着缓动淡出。

现在，我想做的事情似乎很简单，但我只是不知道如何实现它。我只需要能够为我导航到的第一个菜单设置动画，但是当我将鼠标悬停在它们之间时，应该没有动画。

例如，假设我有以下菜单结构：

  • 家
  • 关于
    • 公司
    • 使命与愿景
  • 解决方案
    • 关于我们的解决方案
    • 退款保证
  • 联系我们

“关于”和“解决方案”都有子菜单。如果我将鼠标悬停在“关于”上，我希望它的子菜单淡入。如果我将鼠标直接从“关于”移动到“解决方案”，我希望可见的子菜单简单地消失（不褪色），并且“解决方案”子菜单简单地出现（不褪色）。然后，当鼠标离开“解决方案”时，该菜单应该会淡出。

一开始可能听起来很傻，但我有这个过程的原因。看，我在子菜单后面有一个页面范围的块元素，它也与菜单本身一起动画。其目的是使菜单更加突出。现在，我不希望每次在菜单之间切换时都会消失。

这可能吗？

这是我现在的[基本]代码：

MainMenu = {
    setup: function(menu, over, out) {
        $(menu).hoverIntent(function() {
            $(this).find('div, ul')[over]({duration: 450, easing:'easeInOutQuad'});
            $('div.backFade')[over]({duration: 450, easing:'easeInOutQuad'});
        }, function () {
            $(this).find('div, ul')[out]({duration: 450, easing:'easeInOutQuint'});
            $('div.backFade')[out]({duration: 450, easing:'easeInOutQuint'});
        });
    }
}
MainMenu.setup('div.menuPlaceHolder > ul > li:has(div,ul)', 'fadeIn', 'fadeOut');
4

1 回答 1

0

找到了：

MainMenu = {
    setup: function(menu, over, out) {
        $(menu).hoverIntent({
            over: function() {
                $(this).find('div, ul').stop()[over]({duration: 450, easing:'easeInOutQuad'});
                $('div.backFade').stop()[over]({duration: 450, easing:'easeInOutQuad'});
            },
            out: function () {
                $(this).find('div, ul').stop()[out]({duration: 450, easing:'easeInOutQuint'});
                $('div.backFade').stop()[out]({duration: 450, easing:'easeInOutQuint'});
            },
            interval: 0
        });
    }
}

我只是将interval方法设置为0并添加stop()到每个操作中。因此，菜单将始终具有动画效果（我猜这没关系），但backFade不会。

于 2013-09-21T08:42:47.130 回答