Question

现在我正在建立一个网站，现在我正在制作菜单栏。幸运的是，我在互联网上找到了一个很好的教程，到目前为止我已经成功实现了它。教程和源代码可以在这里找到： source code of the menubar 结果可以在这里找到：Live Demo site 实际上，我想在我的下拉菜单中添加一个过渡效果。我想有以下效果：当我将鼠标移动到其中一个菜单栏时，下拉菜单会显示＆＃34;淡入＆＃34;改变不透明度的效果（如果我没有记错，淡入效果会连接到改变不透明度）。如果我用鼠标移动到另一个位置，则下拉缓慢返回，将不透明度从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/ ---替换为box-shadow

我很高兴能够帮助你：D

Css下拉菜单转换效果

1 个答案: