jquery fadein이 깜박입니다

Question

누군가 제발 나를 도울 수 있기를 바랍니다.

http://jsfiddle.net/zhPAF/

마크 업 : 나는 다음과 같은 문제가

<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 ('우리를 People ') 앵커가 나타납니다. subList1은 페이드 인해야합니다. 피들에서 볼 수 있듯이 첫 번째 호버에는 나타나지 않지만 후속 호버에서는 사라지지 않습니다. 마찬가지로 다음 앵커 ('Our Services')도 같은 일을하고 있으며 그 사이에 갈 때 약간의 페이딩 문제가 있습니다.

나는 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'); 
     }); 
    }); 

Answer 1

당신이 $('#topNavSecond').parent().hover(function() #이 topNavSecond의 부모는 전체 UL 것 설정이 :하지만 다음 jQuery를은 (사실, 사실) 일부 .stop를 추가하는 것이 좋습니다. 난 당신이 $('#topNavSecond').hover(function()

여기를 참조하십시오 의미 생각 : http://jsfiddle.net/zhPAF/1/

Answer 2

내가 어떤 깜박임이 표시되지 않습니다하지만 어쩌면 내가 이해하지 못하는거야. 그러나 애니메이션이 끝나지 않은 경우에 대비하기 전에 일부 .stop()을 추가해야합니다. 이이 추가 : 호출하는 대신 이제

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

:

#topNav li { 
    position:relative; 
} 

는이 규칙을 추가

 $('#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/

Answer 3

는 첫째로 나는 당신의 CSS를 일부 추가 할 것 직접 태그 유형 및 계층 구조를 사용하여 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'); 
     }); 

이것은 li 내부에 포함 된 ul에 대해 topnav로 식별되는 모든 문자에서 작동합니다. CSS를 사용하여 위치를 지정하십시오. 같은 기능을하고 더 많은 컨트롤을 제공하기 때문에 애니메이트를 시작했습니다. '높이'를 쉽게 추가 할 수 있습니다 : '쇼'와 '높이': 좋은 애니메이션을 얻으려면 '숨기기'.

나는 li 내부의 특정 너비를 설정하지 않는 것이 좋습니다. 공백 추가 : nowrap; 그 다음에 패딩을 사용하여 태그 레벨에서 모두 수행하십시오. ul 's와 li 's는 이들에 모양을 나타냅니다.

IE를 사용하지 않는 것이 좋습니다. IE는 다른 방식으로는 잘 작동하지 않으므로 a를 사용하지 마십시오.