Плавное исчезновение и появление изображения
 

Как реализовать плавное появление и исчезновение изображений при наведении на ссылки.

<ul id=”menu”>
<li><a href="01/">Ссылка1</a>
<img width="154" height="134" alt="" src="154.gif" >
</li>
 <li><a href="02/">Ссылка2</a>
<img width="154" height="134" alt="" src="dsfsd.gif">
</li>
</ul>

Пробовал так и по разному, не получается

var mm_bgimg_obj = jQuery(this).find("#menu ul");
      $("#menu ul img").fadeTo("slow", 0.0);
  mm_bgimg_obj.hover(function () {
       $("#menu ul img").fadeTo("slow", 1.0);
}, function () {
       $("#menu ul img").fadeTo("slow", 0.0);
});

Помогите! Спасибо!

апострофы не стандартные какие то, скорее всего будут проблемы

$(function() {
    $("#menu").delegate('a', 'mouseover', function(e) {
        $(this).parents('li').find('img').stop().fadeToggle('slow');
        e.preventDefault();
    });
});​

http://jsfiddle.net/QbF2W/

Это опечатка:)

Большое спасибо но, к сожалению, не совсем корректно работает!
Изначально изображения скрыты display:none;
Логика меню такая…

При наведение на ссылку1 плавно появляется img1 (которое принадлежит этому пункту)
При наведение на ссылку2 (исчезает img1) и плавно появляется img2 (которое принадлежит этому пункту) и т.д.

Извините за тавтологию. Причем пунктов может быть N… количество и у каждого пункта свое изображение. Может еще - это как-то реализуется? Спасибо!

тогда как-то так :

http://jsfiddle.net/QbF2W/1/

var last = $();

$("#menu").delegate('a', 'mouseover', function(e) {
    if(last.is(':visible')) last.fadeOut('slow');
    last = $(this).parents('li').find('img').stop().fadeToggle('slow');
    e.preventDefault();
});​

Пошевелите мышкой. мне кажется, анимация немного buggy.

Эхххх….вроде должно работать, а вот у меня нет. Жаль, что не знаю jQuery

При наведений на пунк1 появляются все три изображения (допустим меню из 3-х пунктов) наслаиваясь друг на друга. При наведений на пункт2 они все исчезают. На пункт3 опять все три и т.д

Уже думаю оставить, как было на чистом CSS но тогда – это не совсем красиво.

да ну

http://jsfiddle.net/QbF2W/2/

отсюда и пляшите.

Оооо почти работает. Я стили не дописал как надо. Но есть одна странность приходиться «передергивать» курсором на ссылке, чтобы появилось изображения т.е.
При первом наведение display:none opasiti:0 передернул по ссылки display:block
Почему такое может быть? Спасибо за ваши старания!

Оказывается идет конфликт с плагином jquery cycle (консоль без ошибок firebug)
Вот теперь с этим надо разобраться! Куда копать…с этим