오래된 이미지를 페이드 아웃하고 목록 항목 탐색을 위해 새로 페이드 아웃

Question

각 목록 항목 (집, 서비스 및 연락처)에 대한 스프라이트 이미지가 있습니다. 나는 CSS를 사용하여 마우스를 올리면 위치를 이동합니다. 위치를 빠르게 이동하는 대신 전환을 사라지게하는 것을 제외하고는 정상적으로 작동합니다. 버튼을 마우스로 가리키고있는 것처럼 보이게하려고합니다. 나는 그것을 천천히하고 싶다. 나는 이것에 하루 종일 있었고 어디에도 가지 않고 있었다. 어떤 도움을 주셔서 감사합니다!

HTML

<ul id="navigation"> 
<li class="link1"><a href="index.html">Home</a></li> 
<li class="link2"><a href="services.html">Services</a></li> 
<li class="link3"><a href="contact.html">Contact</a></li> 
</ul> 

CSS

li.link1 { 
text-indent: -9999px; 
background-image: url(../images/home.png); 
background-repeat: no-repeat; 
height: 15px; 
width: 66px; 
background-position: left top; 
} 
li.link1:hover { 
background-image: url(../images/home.png); 
background-repeat: no-repeat; 
height: 15px; 
width: 66px; 
background-position: left bottom; 
} 
li.link2 { 

Repeats itself... 

Answer 1

당신이 상대 위치와 CSS3 전환와 함께 할 수 있을까요?

li.link1 { 
    position: relative; 
    text-indent: -9999px; 
    background-image: url(http://www.rjdesigns.net/temp/images/home.png); 
    background-repeat: no-repeat; 
    height: 15px; 
    width: 66px; 

    transition: margin 0.25s; 
    -moz-transition: margin 0.25s; /* Firefox 4 */ 
    -webkit-transition: margin 0.25s; /* Safari and Chrome */ 
    -o-transition: margin 0.25s; /* Opera */ 
} 

li.link1:hover { 
    background-position: left bottom; 

    // These lines add height to the top of the li, so it doesn't 
    // glitch/vibrate if you hover on the top pixel or two 
    border-top: 2px solid transparent; 
    top: -2px; 

    // Increase margin by 2px on top and left 
    // Decrease by 2px on right so you don't shift other menu items 
    margin: 2px -2px 0 22px !important; 
} 

데모 :
http://jsfiddle.net/jtbowden/gP9kD/1/

jQuery를

당신이 진정한 fade을 원하는 경우 :
http://jsfiddle.net/jtbowden/gP9kD/

업데이트 데모 li 요소에 대한 세 가지 링크와 간단한 CSS와 효과, 당신은 할 수 t 그의 jQuery. 여기 일례를 함께 해킹 :

http://jsfiddle.net/jtbowden/gP9kD/4/

이 예는 각각의 클론 li 백그라운드 포지셔닝을 변경하고, 절대 전류 li 요소에서 그들을 배치하고 숨겨 만든다. 그런 다음 마우스를 올리면 기본 li이 페이드 아웃 (거의 0으로 계속 활성 상태로 유지됨)되고 아래쪽으로 사라집니다.

li 클론에 여전히 링크가 포함되어 있기 때문에 조금 해킹됩니다. 그러나 작동하고 원리를 입증합니다.