jquery - jquery フェディンがちらつく

Question

誰かが私を助けてくれることを願っています。次の問題があります。

マークアップ:

<nav>
                <ul id="topNav">
                    <li id="topNavFirst"><a href="pages/about/about.php" id="aboutNav">About Us</a></li>
                    <li id="topNavSecond"><a href="pages/people/our-people.php" id="peopleNav">Our People</a>
                        <ul id="subList1">
                            <li><a href="pages/people/mike-hadfield.php">Mike Hadfield</a></li>
                            <li><a href="pages/people/karen-sampson.php">Karen Sampson</a></li>
                            <li><a href="pages/people/milhana-farook.php">Milhana Farook</a></li>
                            <li><a href="pages/people/kim-crook.php">Kim Crook</a></li>
                            <li><a href="pages/people/amanda-lynch.php">Amanda Lynch</a></li>
                            <li><a href="pages/people/gideon-scott.php">Gideon Scott</a></li>
                            <li><a href="pages/people/paul-fuller.php">Paul Fuller</a></li>
                            <li><a href="pages/people/peter-chaplain.php">Peter Chaplain</a></li>
                            <li><a href="pages/people/laura-hutley.php">Laura Hutley</a></li>
                        </ul>
                    </li>
                    <li id="serviceNavDropdown"><a href="our-services.php" id="servicesNav">Our Services</a>
                        <ul id="subList2">
                            <li><a href="pages/services/company-and-commercial.php">Company &amp; Commercial</a></li>
                            <li><a href="pages/services/employment.php">Employment</a></li>
                            <li><a href="pages/services/civil-litigation.php">Civil Litigation</a></li>
                            <li><a href="pages/services/debt-recovery.php">Debt Recovery</a></li>
                            <li><a href="pages/services/conveyancing.php">Conveyancing</a></li>
                            <li><a href="pages/services/commercial-property.php">Commerical Property</a></li>
                            <li><a href="pages/services/wills-and-probate.php">Wills &amp; Probate</a></li>
                            <li><a href="pages/services/family.php">Matrimonial &amp; Family</a></li>
                        </ul>
                    </li>
                    <li><a href="pages/news/news.php" id="newsNav">News</a></li>
                    <li><a href="pages/careers/careers.php" id="careersNav">Careers</a></li>
                    <li><a href="pages/contact/contact.php" id="contactNav">Contact</a></li>
                </ul><!-- /topNav -->
            </nav>

CSS

#topNav {
float:right;
height:30px;
margin:0;
font-size:12px;
}

#topNav li {
display:inline;
list-style:none;
color:#666;
border-left: 1px solid #666;
padding: 0 0 0 3px;
}

#topNav li a:hover {
}

#topNavFirst {
border-left: 1px solid transparent !important;
}

#topNav ul{
background:#fff url(images/people-ul-bg.png) no-repeat;
border:1px solid #666;
border-top:0px solid transparent;
border-bottom:2px solid #666;
list-style:none;
position:absolute;
left:-9999px;
width:90px;
text-align:left;
padding:5px 0 5px 0px;
z-index:10;
}

#topNav ul li{
display:block;
border-left:0px;
margin-bottom: 0px;
padding:0;
}

#topNav ul a{
padding:0 0 0 5px;    
}

#topNav li:hover ul{
left:auto;
margin-left:55px;
margin-top:-1px;            
}

#topNav li:hover a { 
color:#369;
}

#topNav li:hover ul a{ 
text-decoration:none;
color:#666;
}

#topNav li:hover ul li a:hover{ 
color:#fff;;
width:100%;
}

#topNav ul li:hover {
background:#369;
display: block;
}

#topNav ul li a {
display: block;
padding:0 0 0 4px;
}

#serviceNavDropdown ul{ 
background:#fff url(images/service-ul-bg.png) no-repeat;
width:135px !important;
margin-left:117px !important;
margin-top:-1px;        
}

jQuery

jQuery(document).ready(function () {

        $('#subList1').css("display", "none");
        $('#topNavSecond').hover(function () {
            $('#subList1').fadeIn('slow');
        },
        function(){
            $('#subList1').fadeOut('slow');
        });
         $('#subList2').css("display", "none");
        $('#serviceNavDropdown').hover(function () {
            $('#subList2').fadeIn('slow');
        },
        function(){
            $('#subList2').fadeOut('slow');
        });
    });

#topNavSecond ('Our People') アンカーをホバーすると、ul #subList1 がフェードインするはずです。フィドルからわかるように、最初のホバーではフェードせず、後続のホバーでのみフェードします。同様に、次のアンカー (「当社のサービス」) も同じことを行っており、それらの間を移動するときにいくつかのフェージングの問題があります。

私は jquery に関する知識の限界に達しました (確かにそれほどではありません!)。助けていただければ幸いです。

edit> 上記のコードは修正されたコードであり、機能しています。ただし、.stop(true, true) をいくつか追加して、次の jQuery の方が優れています。

jQuery(document).ready(function () {

        $('#subList1').css("display", "none");
        $('#topNavSecond').hover(function () {
            $('#subList1').stop(true, true).fadeIn('slow');
        },
        function(){
            $('#subList1').stop(true, true).fadeOut('slow');
        });
         $('#subList2').css("display", "none");
        $('#serviceNavDropdown').hover(function () {
            $('#subList2').stop(true, true).fadeIn('slow');
        },
        function(){
            $('#subList2').stop(true, true).fadeOut('slow');
        });
    });

score 2 · Accepted Answer

$('#topNavSecond').parent().hover(function ()#topNavSecond の親が UL 全体になるように設定しました。私はあなたが意味すると信じています $('#topNavSecond').hover(function ()

ここを参照してください: http://jsfiddle.net/zhPAF/1/

score 1 · Accepted Answer

ちらつきは見られませんが、理解していない可能性があります。.stop()ただし、アニメーションが終了していない場合に備えて、アニメーションが発生する前にを追加する必要があります。

        $('#subList1').css("display", "none");
        $('#topNavSecond').parent().hover(function () {
            $('#subList1').stop(true, true).fadeIn('slow');
        },
        function(){
            $('#subList1').stop(true, true).fadeOut('slow');
        });
         $('#subList2').css("display", "none");
        $('#serviceNavDropdown').parent().hover(function () {
            $('#subList2').stop(true, true).fadeIn('slow');
        },
        function(){
            $('#subList2').stop(true, true).fadeOut('slow');
        });

http://jsfiddle.net/imoda/zhPAF/3/

score 0 · Accepted Answer

まず、css にいくつかの追加を行います。これをこれに追加します。

#topNav li {
    position:relative;
}

次のルールを追加します。

#topNav li ul {
    position:absolute;
    display:none;
}

直接呼び出すのではなく、jQuery を使用して、タグの種類と階層によってそれらを取得します。

$('#topNav li').hover(function () {
            $(this).children('ul').stop(true, true).animate({'opacity' : 'show'}, 'slow');
        },
        function(){
            $(this).children('ul').stop(true, true).animate({'opacity' : 'hide'}, 'slow');
        });

これは、topnav として識別されたものの中の li に含まれるすべての ul で機能します。CSS を使用して配置を指定します。私が animate を選んだのは、同じように機能し、より多くの制御を提供するためです... 'height' : 'show' と 'height' : 'hide' を簡単に追加して、素敵なアニメーションを作成できます。

li 内の ul に特定の幅を設定しないことをお勧めします。空白を追加します: nowrap; li に追加してから、いくつかのパディングを使用して a タグレベルですべてを実行すると、ul と li がこれらに整形されます。

また、私は :hover を a 以外に使用しないようにします。

jquery - jquery フェディンがちらつく

3 に答える 3

Related

Reference