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

Question

我正在寻找解决我问题的方法。我想在悬停时制作动画（向上滑动，向下滑动），但我无法解决它。如果您查看this页面，它是一个图像路由器。这是明确的CSS解决方案，没有JS工作，但我想添加滑动动画...如果图像子菜单上的mouseenter应该从底部向上滑动，当鼠标悬停子菜单应该向下滑动时。非常感谢您提供解决方法的提示

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;