0

我正在尝试创建一个像这里（http://themes.fuelthemes.net/bouncy/）这样的导航菜单进行练习，我已经很接近了，但我的看起来不太像（动画不是那么流畅) 与示例中的一样好。源代码非常大，我找不到作者如何在 css 代码或通过 javascript 中创建动画。这是我到目前为止所拥有的。有人可以看看并告诉我我做错了什么吗？

我用来使菜单向下滑动的方法是使用 max-height 属性，并使用 opacity 属性使其淡入。

大量动画代码：

.menu > li:hover > ul {
    display: block;
    -webkit-transition: max-height 0.2s, opacity 0.2s;
    -moz-transition: max-height 0.2s, opacity 0.2s;
    -ms-transition: max-height 0.2s, opacity 0.2s;
    -o-transition: max-height 0.2s, opacity 0.2s;
    transition: max-height 0.2s, opacity 0.4s;
    max-height: 500px;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}
.dropdown {
    max-height: 0;
    position: absolute;
    list-style: none;
    background: #2c2c2c;
    margin: 0;
    padding: 0;
    overflow: hidden;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
}

我的 JSFiddle：http: //jsfiddle.net/cn2fZ/

4

1 回答 1

0

他们没有使用转换代码是这样的

http://jsbin.com/onituc/1/

或者

这个http://jsbin.com/onituc/2/edit

两者都是不同的风格

第一个使用mouseenter与mouseleave函数结合的delay函数。除了使用淡入淡出之外，我们还可以将其更改fadeIn为其他内容，例如 show slideDown

第二个只是将slideUpandslideDown函数与mouseenter mouseleave

希望这两个中的一个对您有所帮助，如果您需要更多帮助，请发表评论

于 2013-06-18T02:22:05.297 回答