Fade Out Old Image и Fade In New для навигации по элементам списка

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/

Обновление демо со всеми тремя ссылками и упрощенным CSS для li elements:
http://jsfiddle.net/jtbowden/gP9kD/1/

jQuery

Если вам нужен настоящий fade эффект, вы можете сделать это с помощью jQuery.Я взломал пример здесь:

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

В этом примере создаются клоны каждого li, изменяющего расположение фона, и абсолютно позиционирующего их под текущие элементы li и скрывающегоих.Затем при наведении курсора он исчезает из основного li (почти до нуля, так что он все еще остается активным), а затем исчезает в нижнем.

Это немного хакерски, потому что клоны li все ещесодержать ссылку и т. д. Но это работает и демонстрирует принцип.