Css下拉菜单转换效果

Nowadays I am building a website and now I am making the menu-bar. Fortunately I have found a nice tutorial on the internet, and so far I have successfully implemented it. The tutorial and the source code can be found here: source code of the menubar And the result of this can be found here: Live Demo site Actually, I would like to add an transition effect to my dropdown menus. I would like to have the following effect: When I move the mouse to one of the menubar the drop-down menu will show up with a "fade-in" effect changing the opacity(If I am not mistaken, the fade-in effect is connected to change the opacity). And If I would move to another position with the mouse the drop-down goes back slowly, changing the opacity from 1 to 0.

现在我正在建立一个网站，现在我正在制作菜单栏。幸运的是，我在互联网上找到了一个很好的教程，到目前为止我已经成功实现了它。教程和源代码可以在这里找到：菜单栏的源代码和结果可以在这里找到：现场演示网站实际上，我想在我的下拉菜单中添加一个过渡效果。我想有以下效果：当我将鼠标移动到其中一个菜单栏时，下拉菜单会显示“淡入”效果，改变不透明度（如果我没有弄错，则为淡入效果连接以改变不透明度）。如果我用鼠标移动到另一个位置，则下拉缓慢返回，将不透明度从1更改为0。

Needless to say, I have already tried different solutions for it, but none of them worked :\ My last attempt was the following but it did not worked properly. I see the effect, but the whole menu bar is screwed up.

毋庸置疑，我已经为它尝试了不同的解决方案，但它们都没有工作：\我的最后一次尝试是以下但是它没有正常工作。我看到了效果，但整个菜单栏都搞砸了。

.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;
...

I hope you could help me, I would appreciate it, Thanks in advance!

我希望你能帮助我，我将不胜感激，提前致谢！

1 个解决方案

#1

We can animate dropdown with this:

我们可以使用此动画下拉列表：

$('#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();
        });
    });

We cant animate the top menu item because it have a gradient: CSS3 gradients cant still be transitioned.

我们无法为顶部菜单项设置动画，因为它有一个渐变：CSS3渐变仍然无法转换。

Here you go: http://jsfiddle.net/kLfp1o6k/7/

你去：http：//jsfiddle.net/kLfp1o6k/7/

And works a bit better witouth borders: http://jsfiddle.net/kLfp1o6k/8/ --- replaced with box-shadow

并且在边界上工作得更好：http：//jsfiddle.net/kLfp1o6k/8/ ---用盒子阴影代替

Im glad to be able to help you :D

我很高兴能够帮助你：D

#1