0

次のjQueryコードを使用して、ユーザーが順序付けられていないメニューリストにカーソルを合わせたときに、フェードインフェードおよびフェードアウト効果を作成しています。しかし、フェードを機能させることができないようです。どんな助けでも大歓迎です。

オンラインテストページへのリンクは次のとおりです 。http ：//www.youmeusdesign.co.uk/menutest/

jQueryコードは次のとおりです。

$(function(){
    $("#menu ul li").hover(function(){
             $(this).children("ul").fadeIn(500);
       },
       function(){
             $(this).children("ul").fadeOut(500);   
    })
})

HTMLは次のとおりです。

<div id="menu">
    <ul>
        <li aria-haspopup="true"><a href="index.html"></a>
            <ul>
                <li><a href="index.html">ABOUT</a>
                    <ul class="submenu1">
                        <li class="column1" aria-haspopup="false"><a href="index.html">Approach</a></li>
                        <li class="column1" aria-haspopup="false"><a href="index.html">Team</a></li>
                    </ul>
                </li>    
                <li><a href="index.html">CASE STUDIES</a>
                    <ul class="submenu2">
                        <li class="column1" aria-haspopup="false">TITLE1</li>
                        <li class="column1" aria-haspopup="false"><a href="index.html">Project A</a></li>
                        <li class="column1" aria-haspopup="false"><a href="index.html">Project B</a></li>
                        <li class="column1" aria-haspopup="false"><a href="index.html">Project C</a></li>
                        <li class="column1" aria-haspopup="false"><a href="index.html">Project D</a></li>
                        <li class="column1" aria-haspopup="false"><a href="index.html">Project E</a></li>
                        <li class="column1" aria-haspopup="false"><a href="index.html">Project F</a></li>
                        <li class="column1" aria-haspopup="false"><a href="index.html">Project G</a></li>
                        <li class="column2 negative-margin-160" aria-haspopup="false">TITLE2</li>
                        <li class="column2" aria-haspopup="false"><a href="index.html">Project H</a></li>
                        <li class="column2" aria-haspopup="false"><a href="index.html">Project I</a></li>
                        <li class="column2" aria-haspopup="false"><a href="index.html">Project J</a></li>
                        <li class="column2" aria-haspopup="false"><a href="index.html">Project K</a></li>
                        <li class="column2" aria-haspopup="false"><a href="index.html">Project L</a></li>
                        <li class="column2" aria-haspopup="false"><a href="index.html">Project M</a></li>
                        <li class="column2" aria-haspopup="false"><a href="index.html">Project N</a></li>
                        <li class="column2" aria-haspopup="false"><a href="index.html">Project O</a></li>
                    </ul>
                </li>
                <li><a href="index.html">NEWS &amp; PRESS</a>
                    <ul class="submenu3">
                        <li class="column1" aria-haspopup="false"><a href="index.html">News</a></li>
                        <li class="column1" aria-haspopup="false"><a href="index.html">Press</a></li>
                        <li class="column1" aria-haspopup="false"><a href="index.html">Awards</a></li>
                    </ul>
                </li> 
                <li><a href="index.html">CONTACT</a>
                </li>       
            </ul>
        </li>       
    </ul>
</div>
4

3 に答える 3

0

Firefoxで動作しますが、Chromeでは動作しませんaminateまたはshow/hideを使用します

于 2013-03-19T21:45:06.257 に答える
0

コメントしてくれてありがとう。animateを使用してみましたが、ChromeとSafariで機能するようになりましたが、ページの読み込み後にメニューに最初にカーソルを合わせたときにフェードが機能しないようで、2回目にカーソルを合わせて機能させる必要があります。

変更されたオンラインテストページへのリンクは次のとおりです。http ：//www.youmeusdesign.co.uk/menutest/

変更されたjQueryは次のとおりです。

$(function(){
    $("#menu ul li").hover(function(){
             $(this).children("ul").animate(
            {"opacity": "1"},
            500);
       },
       function(){
             $(this).children("ul").animate(
            {"opacity": "0"},
            500);   
    })
})

どうもありがとう。

于 2013-03-19T22:16:59.453 に答える
0

CSSとJavascriptの間で競合が発生しています。CSSには、次のものがあります。

#menu ul ul {
    position: absolute;
    width: 545px;
    height: 270px;
    left: 0;
    top: 80px;
    display: none;
    padding-top: 20px;
    background: #CCC;
}

そして、li要素の1つにカーソルを合わせると、CSSは次のことを行います。

#menu ul li:hover > ul {
    display: block;
    background-image: none;
}

Javascriptが要素をフェードインしようとしていますが、手遅れです。その時点で、要素はdisplay: blockCSSによってすでに設定されています。#menu ul li ulホバーすると、jQueryは要素にインラインスタイルを追加し、設定しますopacity: 0。

次に要素にカーソルを合わせると、CSSが要素をに設定していても、display: block要素はとしてインライン化されているため非表示のままにopacity: 0なり、必要に応じてフェードインできます。

最も簡単な修正は、CSSで不透明度を0に設定する#menu ul ulことですが、.fadeIn（）が機能しなかった理由については興味があります。

于 2013-03-20T00:35:00.517 に答える