jquery悬停在带有滑动efekt的子菜单上

Question

我正在寻找解决问题的方法。我想在悬停时制作动画（向上滑动，向下滑动），但我无法解决它。如果您查看this 页面，它是一个图像路由器。这是清晰的 CSS 解决方案，无需 JS 即可工作，但我想添加滑动动画……如果图像子菜单上的 mouseenter 应该从底部向上滑动，而 mouseover 子菜单应该向下滑动。非常感谢您的提示如何解决它

Answer 1

编辑：

在你的情况下这将是一个解决方案：

在您的 CSS 中删除 #menu ul li:hover ul { display: block; z-index: 300; }。

$(function(){

    $('#menu ul li').mouseenter(function() {

        $(this).find('ul').css({'z-index':'300'}).slideDown();

    });

    $('#menu ul li').mouseleave(function() {

        $(this).find('ul').css({'z-index':'0'}).slideUp();

    });

});

原文：

如果您是 jQuery 新手，这很容易理解：

$(function(){

    $('#selector').mouseenter(function() {

        $('#submenu').slideUp();

    });

    $('#selector').mouseleave(function() {

        $('#submenu').slideDown();

    });

});

jQuery 检查您是否使用鼠标输入或离开元素，例如.mouseenter() 和 .mouseleave()。现在您可以使用.slideUp() .slideDown() 来滑动另一个元素。 一定要先去掉css悬停效果，把要滑动的元素设置为display: none;