css下拉菜单过渡效果

Question

现在我正在建立一个网站，现在我正在制作菜单栏。幸运的是我在网上找到了一个很好的教程，到目前为止我已经成功地实现了它。教程和源代码可以在这里找到: source code of the menubar结果可以在这里找到:Live Demo site实际上，我想为我的下拉菜单添加过渡效果。我想产生以下效果:当我将鼠标移动到菜单栏之一时，下拉菜单将显示“淡入”效果，改变不透明度(如果我没记错的话，淡入效果已连接以更改不透明度)。如果我用鼠标移动到另一个位置，下拉菜单会慢慢返回，将不透明度从 1 更改为 0。

不用说，我已经尝试过不同的解决方案，但没有一个有效:\我最后一次尝试如下，但它没有正常工作。我看到了效果，但是整个菜单栏都搞砸了。

.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
visibility:visible!important;
opacity:0;
transition:opacity 0.4s ease-in-out;
-moz-transition:opacity 0.4s ease-in-out;
-webkit-transition:opacity 0.4s ease-in-out;
-o-transition:opacity 0.4s ease-in-out;
...

我希望你能帮助我，我将不胜感激，在此先感谢!

Answer 1

我们可以用这个动画下拉:

$('#menu li').mouseenter(function () {
        $(this).find('[class^="dropdown"]').stop();
        $(this).find('[class^="dropdown"]').css({'overflow':'visible','max-height': '1000px'});
        console.log($(this).children('ul'));
    }).mouseleave(function () {
        $(this).find('[class^="dropdown"]').delay(400).queue(function (next) {
            /*********************************** 0.4s in css ***************/
            $(this).css({'overflow':'hidden','max-height': '0'});
            next();
        });
    });

我们不能为顶部菜单项设置动画，因为它有一个渐变:CSS3 渐变仍然不能过渡。

给你:http://jsfiddle.net/kLfp1o6k/7/

在没有边框的情况下效果更好:http://jsfiddle.net/kLfp1o6k/8/ --- 替换为框阴影

很高兴能帮到你:D