JQuery와 페이드는 <a href="http://jsfiddle.net/eFLdd/1/" rel="nofollow">http://jsfiddle.net/eFLdd/1/</a>처럼

Question

나는 스프라이트 이미지를 기반으로 UL 리 탐색 있습니다.

이미지를 가져도 있습니다. 나는 페이드 아웃 및 페이드와 클래스 즉 nav1hover 변경 각 항목에 대해 마우스 오버 기능을합니다.

합니까 사람이 몇 가지 팁이있다? thx 사전에.

Answer 1

동시에 탐색 현재의 두 상태를 예를 들어 http://jsfiddle.net/graham/kxpLu/2/을보고 더 좋을 것이다. 탐색에 대한 간단한 목록을 작성하여

는 :

<ul class="navigation"> 
    <li class="nav1"><a href=""><span></span></a></li> 
    <li class="nav2"><a href=""><span></span></a></li> 
</ul> 

같은 스타일이다 :

.navigation li { 
    background: url(http://blog.grahamlicence.co.uk/jsfiddle/nav.jpg) no-repeat 0 0; 
    width: 80px; 
    height: 20px; 
} 
.navigation li.nav2 { background-position: -82px 0; } 
.navigation li span { 
    background: url(http://blog.grahamlicence.co.uk/jsfiddle/nav.jpg) no-repeat 0 -56px; 
    width: 80px; 
    height: 20px; 
    display: block; 
} 
.navigation li.nav2 span { background-position: -82px -56px;} 

내가 여기했던 것은 <span> 요소에 링크의 정상 상태를 추가입니다 <li>의 배경에 마우스를 가져 가면 상태가됩니다.

스크립트는 다음과 같이, 호버에 정상 상태를 페이드 :

이

$(".navigation li a").hover(function() { 
    $(this).children("span").stop().animate({ 
     opacity: 0 
    }, 300); 
}, function() { 
    $(this).children("span").animate({ 
     opacity: 1 
    }, 400); 
});