0

練習用に、ここ ( http://themes.fuelthemes.net/bouncy/ )のようなナビゲーション メニューを作成しようとしています。) 例と同じように。ソース コードは非常に大きく、作成者が CSS コードまたは JavaScript を使用してアニメーションを作成する方法を見つけることができません。これが私がこれまでに持っているものです。誰かが見て、私が間違っていることを教えてもらえますか?

メニューを下にスライドさせるために使用している方法は、max-height プロパティを使用することであり、不透明度プロパティでフェードインさせています。

大量のアニメーション コード:

.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

どちらもスタイルが違います

1 つ目は、関数mouseenterとmouseleave関数を組み合わせて使用​​しdelayます。フェードインを使用するだけでなく、次fadeInのような他のものに 変更できますshow slideDown

2 つ目は、関数slideUpとslideDown関数を組み合わせて使用​​するだけです。mouseenter mouseleave

これら2つのうちの1つがあなたを助けてくれることを願っています。さらに助けが必要な場合はコメントしてください

于 2013-06-18T02:22:05.297 に答える