Эффект ролловера изображения в jquery?

Question

Вот мой код

$('.smenu li').mouseover( function(){
        var src = $(this).find('a').attr('href');
        $('.hbg').css('background-image', 'url(' + src + ')');
        });

HTML-код

<div class="smenu">
                <ul>
                  <li ><a href="images/hosp.jpg"><img src="images/menu_hosp.jpg" border="0"></a></li>
                  <li ><a href="images/edu.jpg"><img  src="images/menu_edu.jpg" border="0"></a></li>
                  <li ><a href="images/enter.jpg"><img  src="images/menu_enter.jpg" border="0"></a></li>
                  <li ><a href="images/retail.jpg"><img  src="images/menu_retail.jpg" border="0"></a></li>                    
                </ul>
              </div>

это нормально работает, но как я могу установить некоторые эффекты ролловера во время смены изображения, потому что теперь его просто меняют фоновое изображение с помощью вспышки при наведении мыши, я хочу немного затухания или что-то еще...

Answer 1

У меня была такая проблема раньше. Вам нужно взять текущее отображаемое изображение и поместить его на задний план. Затем вставьте тег img поверх фона (скрытый), загрузите следующее изображение в тег image, затем добавьте его. Это должно дать вам довольно простой переход для работы.

Оттуда вы можете посмотреть на скольжение в изображении для чего-то более причудливого.